兩欄CSS菜單的菜單欄與主內容相同？

嘿做了一點挖掘和谷歌搜索建議一些欺騙，以獲得同一高度的兩列。只是有點緊張，因爲需要這樣做，而不是彎曲任何規則。有沒有一種方法可以使列的高度相同，即主體和菜單列是相同的，而不管其中有多少內容。兩欄CSS菜單的菜單欄與主內容相同？

使用XHTML strict1.0。

感謝

達明

2012-08-28 Damien-Data

你能使用JavaScript嗎？ – zenkaty

如果您提到您檢查了什麼，以及您對彎曲有什麼警惕，會有所幫助。無論如何，這裏有兩個符合標準的解決方案 - CSS-Tricks處理：css-tricks.com/super-simple-two-column-layout。和A List Apart的處理：alistapart.com/articles/fauxcolumns – alexvance

添加一些固定的高度約。屏幕高度和溢出：隱藏父母的div。添加溢出：自動和高度：100％爲主div &側邊欄。因此，內容增長時佈局不會中斷。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style type="text/css"> 
body     { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; } 
.clear     { clear:both; } 
.container    { background:#eee; display:inline-block; height:300px; overflow:hidden; padding:10px; width:800px; } 
.container p,   { color:#003; } 
.main     { background:#fff; float: right; height:100%; overflow:auto; padding:0 15px; text-align:justify; width:470px; } 
.main h1    { color:#930; } 
.sidebar    { background:#000; float:left; height:100%; overflow:auto; width:280px; } 
.sidebar ul li a  { color:#fff; text-decoration:none; } 
</style> 

</head> 

<body> 

<div class="container"> 
     <div class="sidebar"> 
      <ul> 
       <li><a href="#">Link -1</a></li> 
       <li><a href="#">Link -2</a></li> 
       <li><a href="#">Link -3</a></li> 
      </ul> 
     </div> 

     <div class="main"> 
      <h1> Lipsum dot com </h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 

      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 

      <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> 

      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 


     </div> 
     <br class="clear" /> 
</div> 


</body> 
</html>

我已到頁面的CSS一些變化，按下面的評論，你可以看看這個

<style type="text/css"> 
body     { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; } 
.clear     { clear:both; } 
.container    { background:#eee; display:block; overflow: hidden; position: relative; padding:10px !important; width:800px; } 
.container p,   { color:#003; } 
.main     { background:#fff; float: right; height:100%; overflow:auto; padding:0 15px; text-align:justify; width:470px; } 
.main h1    { color:#930; } 
.sidebar    { background:#000; float:left; height: 100%; left:10px; position: absolute; width:280px; } 
.sidebar ul li a  { color:#fff; text-decoration:none; } 
</style>

來源

2012-08-29 14:41:14 Aratidgr8

當我這樣做，我滾動條，而不是內容列彼此相關增長 –

嗨，當我嘗試這一切都是滾動酒吧no =列 –

檢查新的CSS代碼，以上。 – Aratidgr8

小提琴：http://jsfiddle.net/uYknh/

<div id="cols"> 
    <div class="col col1"> 
     asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/> 
    </div> 
    <div class="col col2"> 
     asd<br/>asd<br/> 
    </div> 
</div>

.cols{display:table-row;width:100%;} 
.col{display:table-cell;width:230px;background-color:#eee;border:1px solid #555;}

來源

2012-08-29 00:27:35 sabithpocker

很酷的任何想法，爲什麼當我通過Microsoft Expression設計視圖看到它們時，它們不會在彼此旁邊顯示，而是在另一個下面顯示，就好像只有1列？ –

看起來像這不工作ie7和以下http://www.quirksmode.org/css/display.html – sabithpocker

HTML

<div id="main_body" class="custom_width"></div> 
<div id="menu_column" class="custom_width"></div>

CSS

.custom_width { 
    max-width: 400px; 
}

相應地調整寬度。

來源

2012-08-31 08:55:22

兩欄CSS菜單的菜單欄與主內容相同？

回答

相關問題