明確修復不工作（鉻）

我正在爲我的新項目的一些網站模板工作，但有一些麻煩，使側邊欄填充其容器的高度。我嘗試了所有清除修復程序，但似乎都沒有工作（在Chrome中進行了測試）。所以我想知道，我的代碼有什麼問題，或者是否有人知道什麼是解決我的代碼的正確方法？這是主題的代碼：明確修復不工作（鉻）

HTML：

<div class="container"> 
<div class="header"> 
    <div class="logo"> 
     <a href="#"><img src="images/logo.png" border="0" /></a> 
    </div> 
    <div class="nav"> 
     <a href="#" id="current">Home</a> 
       ... 
    </div> 
</div> 
<div class="below_header"> 
    <div class="user_message"> 
       ... 
    </div> 
    <div class="quick_stats"> 
       ... 
    </div> 
</div> 
<div class="content"> 
    <div class="bar_blue"> ... </div> 
    <div class="content_text"> 
    <div class="content_info"> 
       ... text ... 
    </div> 
    <div class="quick_create"> 
       ... 
    </div> 
    </div> 
    <div class="bar_white"> 
     Some Title 
    </div> 
    <div class="content_text"> 

    </div> 
    <div class="footer"> 
     ... 
    </div> 
</div> 
<div class="sidebar"> 
    test 
</div> 
</div>

CSS：

div.container { 
    overflow: auto; 
    margin-left: auto; 
    margin-right: auto; 
    width: 900px; 
    //height: 100%; 
    border: 1px solid #E0E0E0; 
    border-top: 0px; 
    border-bottom: 0px; 
} 

.container { 
    display: inline-block; 
} 
.container:after { 
    content: " "; 
    display: block; 
    height: 0; 
    clear: both; 
    overflow: hidden; 
    visibility: hidden; 
} 
div.content { 
    float: left; 
    width: 635px; 
    height: 100%; 
} 

div.sidebar { 
    float: left; 
    width: 262px; 
    height: 100%; 
    background-image: url("images/sidebar.png"); 
    background-repeat: repeat-y; 
}

凡div.content和div.sidebar是其需要高度相等的唯一浮動的div。現在側邊欄與其左側的浮動內容div的高度（它比側邊欄大）不匹配。嘗試所有清除修復但沒有工作。我怎樣才能解決這個問題？

來源

2013-06-19 user2273652

也許這會有幫助嗎？ http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/ –

謝謝我會研究它，但是我必須說，如果可能的話，我寧願在CSS中這樣做，以便與舊版瀏覽器或不接受js的用戶兼容，但我不知道這是否可能。 – user2273652

你能爲此做一個http://jsfiddle.net/嗎？ – Libin

Check this jsfiddele

我用您所提供的相同的HTML和只更改了CSS。我清楚地評論了我所做的更改

我使用了與here相同的技巧。將以下代碼添加到邊欄和內容中。

padding-bottom: 500em; 
margin-bottom: -500em;

希望這會有所幫助。

來源

2013-06-19 14:12:41 Libin

訣竅，謝謝！似乎現在側欄已經變得很長了，但是它被溢出設置隱藏了，但它仍然可以工作，所以謝謝 – user2273652

height: 100%不能像那樣工作（只有當容器有一個設定的高度時，它才起作用，這是你不想要的）。

您需要將重複背景圖像放在container上，而不是在側邊欄上。

來源

2013-06-19 13:46:39

-1

接下來的時間 - 在jsfiddle.net上創建一個演示，讓人們很容易回答您的問題。

兩點建議：

不要使用像素大小的元素。根據您的寬度設計百分比。
避免在CSS中的高度：聲明。讓高度自然確定。

下面是關於製作等高列的一些信息：http://css-tricks.com/fluid-width-equal-height-columns/

來源

2013-06-19 13:46:52 jbenjohnson

明確修復不工作（鉻）

回答

相關問題