設置div高度以適合使用CSS的瀏覽器

我在容器div中有兩個DIV，我需要將它們都設置爲適合下面的瀏覽器窗口，但它不適合我的代碼，請建議我一個解決方案設置div高度以適合使用CSS的瀏覽器

enter image description here

我的樣式表的代碼

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

      } 

.container { 
    height: auto; 
    width: 100%; 
} 
.div1 { 
    float: left; 
    height: 100%; 

    width: 25%; 
} 
.div2 { 
    float: left; 
    height: 100%; 
    width: 75%; 
}

身體

<body> 
<div class="container"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
</div>

來源

2013-09-21 Dilukshan Mahendra

使用'min-height'，[example]（http://jsbin.com/aNICAva/1/edit） – Vucko

如果兩個都需要100％的高度，爲什麼不給'.container'設置'height：100％'？ – Harry

OFF-TOPIC：你有什麼創建草圖？ – Victor

設置窗口全高爲空的div

絕對定位第一溶液 - FIDDLE

.div1 { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 25%; 
} 
.div2 { 
    position: absolute; 
    top: 0; 
    left: 25%; 
    bottom: 0; 
    width: 75%; 
}

靜態第二溶液定位& jQuery的（也可以用一個相對） - FIDDLE

.div1 { 
    float: left; 
    width: 25%; 
} 
.div2 { 
    float: left; 
    width: 75%; 
} 

$(function(){ 
    $('.div1, .div2').css({ height: $(window).innerHeight() }); 
    $(window).resize(function(){ 
    $('.div1, .div2').css({ height: $(window).innerHeight() }); 
    }); 
});

來源

2013-09-21 15:11:24 mdesdev

This one works！Thanks mdesdev –

不客氣;） – mdesdev

男人，試試最小高度。

.div1 { 
    float: left; 
    height: 100%; 
    min-height: 100%; 
    width: 25%; 
} 
.div2 { 
    float: left; 
    height: 100%; 
    min-height: 100%; 
    width: 75%; 
}

來源

2013-09-21 15:08:47

男人，這很簡單。 – sotix

我剛剛嘗試過，但不工作:( –

該代碼無法使用空白div。 – mdesdev

你要申報的HTML的高度DIV1元素結合在一起，如：

html, 
body, 
.container, 
.div1, 
.div2 { 
    height:100%; 
}

演示：http://jsfiddle.net/Ccham/

來源

2013-09-21 15:14:04

夥計，你不必，但你可以。 – user1191559

你也可以使用viewport percentages如果你不關心老同學IE。

height: 100vh;

來源

2014-06-26 04:40:44 Dsmart

我不認爲你需要浮動。

html, 
 
body, 
 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.div1, .div2 { 
 
    display: inline-block; 
 
    margin: 0; 
 
    min-height: 100%; 
 
} 
 

 
.div1 { 
 
    width: 25%; 
 
    background-color: green; 
 
} 
 

 
.div2 { 
 
    width: 75%; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="div1"></div><!-- 
 
    --><div class="div2"></div> 
 
</div>

display: inline-block;用於顯示塊作爲內聯（就像跨度但保持塊效應）

評論的HTML使用，因爲你必須75％+ 25％= 100％。 divs數量之間的空間（所以你有75％+ 1％？+ 25％= 101％，意思是換行符）

來源

2016-01-19 10:31:24 Dionys

設置div高度以適合使用CSS的瀏覽器

回答

相關問題