Html，Body 100％內容的高度和動態寬度

我知道這裏有些問題涉及我的問題的部分內容，但我不能將它們放在一起以使我的佈局工作。Html，Body 100％內容的高度和動態寬度

所以基本上我想要一個固定的邊欄和動態內容填充剩餘空間的兩個列布局。

HTML：

<body> 
    <div id="navbar"> 
     <ul> 
      <li>Nav 1</li> 
      <li>Nav 2</li> 
      <li>Nav 3</li> 
     </ul> 
    </div> 

    <div id="content"> 
    </div> 
</body>

CSS：

html, body { 
    height:100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

#content { 
    height:100%; 
    float:left; 
    /*margin: 0 0 0 200px;*/ 
} 

#navbar{ 
    height:100%; 
    width:200px; 
    float:left; 
}

有了這個CSS我有我的內容isn't佔用的剩餘空間的問題，如果我刪除浮動，我收到了垂直滾動條，因爲在頂部有一個邊緣！

任何建議如何我可以實現100％的高度沒有滾動條（沒有溢出隱藏，因爲它不會刪除頂部邊距）和動態內容寬度？

在此先感謝

編輯：

具有諷刺意味的與jsfiddle

來源

2013-09-05 makim

什麼小提琴 – Itay

@Itay呃，小提琴？怎麼樣一個URL？ –

你想要你的div＃內容有動態寬度嗎？ – Syd

這裏是一個解決方案，讓您100％的高度，無論在內容和導航欄：

小提琴：http://jsfiddle.net/92c6M/

HTML

<div id="navbar"> 
    <ul> 
     <li>Nav 1</li> 
     <li>Nav 2</li> 
     <li>Nav 3</li> 
    </ul> 
</div> 

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

CSS

html, body { 
    height:100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

#content { 
    height:100%; 
    width: calc(100% - 200px); 
    display: inline-block; 
    background-color: #DDF; 
} 

#navbar{ 
    height:100%; 
    width:200px; 
    float: left; 
    background-color: #CEC; 
}

來源

2013-09-05 13:23:06 fred02138

哇這是一個非常好的解決方案，不知道鈣！這是否適用於所有瀏覽器，例如IE7甚至6？ – makim

兼容性是ie9 +（http://caniuse.com/#feat=calc） –

IE6？認真。它在IE9 +中工作。 – fred02138

http://jsfiddle.net/gXubX/2/

.container { 
    width: 100%; 
    background: fuchsia; 
} 

.left { 
    width: 200px; 
    float: left; 
    background: purple; 
    min-height: 300px; 
}

並應用於容器clearfix工作。

來源

2013-09-05 12:29:32

嘿，你能解釋我一點，什麼是clearfix？ –

[清除]（http://www.webtoolkit.info/css-clearfix.html） –

我已經嘗試了您的建議，但我仍然有一個邊緣，現在也在底部http://jsfiddle.net/ tqEfS/1/ – makim

CSS：

#wrapper { 
width: 100%; 
float: left; 
positon: relative; 
} 

#navbar { 
width: 200px; 
float: left; 
top: 0px; 
left: 0px; 
position: absolute; 
    height: 300px; 
background-color: red; 
z-index: 2; 
} 

    #content-wrapper { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 300px; 
float: left; 
background-color: blue; 
z-index: 1; 
} 

    #content { 
left: 200px; 
margin-left: 200px; 
background-color: green; 
z-index: 3; 
color: white; 
}

HTML

<div id="wrapper"> 
<div id="navbar"></div> 
<div id="content-wrapper"> 
    <div id="content"> 
     asdfasfdasdfasdg asdga sdgasdg asdgasdgasdgasdg 
    </div> 
</div> 
</div>

來源

2013-09-05 12:32:58 q0re

我不希望導航欄是動態的，它應該有一個固定的寬度 – makim

固定它上面;） – q0re

關閉，但導致水平滾動條： -/ – makim

Html，Body 100％內容的高度和動態寬度

回答

相關問題