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列網站側邊欄全高

回答

相關問題