如何用float設置高度？

我需要設置height:100%。這裏是我的代碼：如何用float設置高度？

#wrapper{ 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    padding: 50px 10px 0 0 !important; 
    /*border: 1px solid red;*/ 
} 

#left-side{ 
    border: 1px solid red; 
    float: left; 
    background-color: #FFFFFF; 
    height: 100%; 
    margin: 0 20px 0 10px; 
    width: 200px; 
} 
#right-side{ 
    border: 1px solid green; 
} 

<body> 
    <div id="wrapper"> 
     <div id="left-side"> 
      lol 
     </div> 
     <div id="right-side"> 
      <!-- squares --> 
     </div> 
    </div> 
</body>

問題出在哪裏？

來源

2012-12-23 Kin

FLoated元素只取自己內容的高度，除非它也是浮動的，在這種情況下，它不需要任何內容。 – JimmyRare

@JimmyRare'

lol

'應該是100％身高。 – Kin

它是否需要浮動？ – cimmanon

當您使用百分比的工作，這是相對於它的父。您的#wrapper有一個父母（body），沒有定義的高度。

在你的CSS，添加：

html, body { height: 100% }

現在你#wrapper可以涉及到它的父。這是因爲html具有瀏覽器窗口，因爲它是父級，所以body html是父級，等等。

Demo fiddle

來源

2012-12-23 23:35:28 JimmyRare

我已編輯CSS一個bit.Check如果這是u需要

#wrapper{ 
    width: 1000px; 
    margin: 0 auto; 
    padding: 50px 10px 0 0 !important; 
    /*border: 1px solid red;*/ 
} 

#left-side{ 
    position:relative; 
    border: 1px solid red; 
    float: left; 
    background-color: #FFFFFF; 
    margin: 0 20px 0 10px; 
    width: 200px; 
} 

#right-side{ 
    width:600px; 
    float:right; 
    border: 1px solid green; 
}

來源

2012-12-23 23:30:54 Arunu

我已經刪除了100％寬度的包裝和將其改爲靜態寬度 – Arunu

如果你的目標是簡單地具有高度相等列，該display: table性能很好地工作這樣的：

#wrapper{ 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    padding: 50px 10px 0 0 !important; 
    /*border: 1px solid red;*/ 
    display: table; /* here */ 
} 

#left-side{ 
    border: 1px solid red; 
    display: table-cell; /* replaces the float */ 
    background-color: #FFFFFF; 
    height: 100%; 
    margin: 0 20px 0 10px; 
    width: 200px; 
} 
#right-side{ 
    border: 1px solid green; 
    display: table-cell; /* here */ 
}

http://jsfiddle.net/VTCxs/

如果你的目標是簡單地防止圖像在#right-side從#left-side左右流動，那麼您需要添加一個等於#right-side到012的寬度的邊距或填充。

來源

2012-12-23 23:37:50 cimmanon

如果100％高度應該表示全屏，則必須將html和body標籤設置爲100％，爲了確保包裝器真的包裝嵌套容器，您必須添加浮動中斷爲包裝元素。

html,body { 
height:100%; 
} 

#wrapper{ 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    padding: 50px 10px 0 0 !important; 
    border: 1px solid blue; 
} 

#wrapper:after { 
    content: " "; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 

}

Here is a small demo。在那個時刻你總是會得到一個滾動條，因爲你的包裝有100％的高度加上50px頂部的填充。

來源

2012-12-23 23:40:04

如何用float設置高度？

回答

相關問題