2列网站侧边栏全高

我正在制作2列网页布局。我想制作一个占用页面高度100％的边框。我尝试了几个不同的东西，但我alwys得到相同的结果，它只会添加边界，只要有内容。任何人都有这方面的建议？2列网站侧边栏全高

HTML

<body> 
    <div id="top"> 
     <nav> 
      <a class="navitem" href="#">Stream</a> 
      <a class="navitem" href="/discover">Discover</a> 
     </nav> 
       <form action="#" class="form-wrapper cf"> 
       <input type="text" placeholder="Search..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search...'" required> 
       <button type="submit">Search</button> 
       </form>  
    </div> 

<div id="wrapper"> 


<div id="content"> 
<h1> Content</h1> 
</div> 

<div id="divider"></div> 

<aside> 
<h1>right bar</h1> 

<footer> 
<nav> 
<a class="navitem_footer" href="/contact">Contact</a> 
<a class="navitem_footer" href="/about">About us</a> 
<a class="navitem_footer" href="/premium">Premium</a> 
</nav> 
</footer> 

</aside> 

</div> 

</body>

CSS

#wrapper { 
    width: 990px; 
    margin-right: auto; 
    margin-left: auto; 
} 

#content { 
    width: 600px; 
    float: left; 
} 

#divider { 
     position: absolute; 
    overflow: hidden; 
    left: 900px; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    border-left: 1px solid rgba(192,192,192,0.6); 
    } 
aside { 
    float:right; 
    width: 390px; 
} 

footer { 
    height: 50px; 
    clear: both; 
    position:fixed; 
    bottom:0; 
}

预先感谢您。

我现在边界工作，但它覆盖我的标题&我试图溢出隐藏，但没有奏效。

截图：http://i62.tinypic.com/2czbp6s.png

来源

2014-05-18 user3650028

表示2列将包含2个不同的HTML链接输出？ – Shashank

你的意思是内容而放在一边吗？那么是的 – user3650028

意味着你只是想将主HTML页面分成2列！垂直 – Shashank

为此，您可以使用标签，通过它可以很容易地划分主页成2列和链接将是你的HTML网页 CODE：

<!DOCTYPE html> 
<html> 

<frameset cols="50%,50%" border="10" BORDERCOLOR=#ff0000> 
    <frame src="first_page.html" frameborder="1"> 
    <frame src="second_page.html" frameborder="1"> 
</frameset> 

</html>

而对于100％边框，您可以使用此代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Border around content</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    html, body { 
     height: 100%; 
     overflow: hidden; 
    } 

    #wrapper { 
     position: absolute; 
     overflow: auto; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
     border: 5px solid red; 
    } 
</style> 
    <!--[if IE 6]> 
    <style type="text/css"> 
    #wrapper { 
     width: expression((m=document.documentElement.clientWidth-10)+'px'); 
     height: expression((m=document.documentElement.clientHeight-10)+'px'); 
    } 
    </style> 
    <![endif]--> 
</head> 
<body> 
    <div id="wrapper"> 
    <!-- just a large div to get scrollbars --> 
    <div style="width: 9999px; height: 9999px; background: #ddd"></div> 
    </div> 
</body> 
</html>

来源

2014-05-18 15:45:35 Shashank

谢谢你，我会试试看，但边界怎么样？因为这是我的主要问题:) – user3650028

两个页面周围的边框？ – Shashank

不，它应该像你看到的分隔线一样行事？ – user3650028

2列网站侧边栏全高

回答

相关问题