欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

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

CSS
方一強1年前8瀏覽0評論

我在一個容器div中有兩個div，我需要將它們都設置為適合瀏覽器窗口，如下所示，但是它不適合我的代碼，請給我一個解決方案

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>

如果你不關心老式IE，你也可以使用視口百分比。

身高:100vh

為空div設置窗口全高

第一個絕對定位解決方案-撥弄

.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() });
  });
});

伙計，試試最小高度。

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

您必須將html的高度聲明為div1元素的高度，例如:

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

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

我認為你不需要浮動。

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>

我認為最快的方法是使用分數網格系統。 所以你的容器有100vw，是窗口寬度的100%，100vh，是窗口高度的100%。

使用分數或“fr”你可以選擇你喜歡的寬度。分數之和等于100%，在本例中為4fr。所以第一部分是1fr (25%)，第二部分是3fr (75%)

更多關于fr單位的信息請點擊此處。

.container{
  width: 100vw;
  height:100vh; 
  display: grid;
  grid-template-columns: 1fr 3fr;
}

/*You don't need this*/
.div1{
  background-color: yellow;
}

.div2{
  background-color: red;
}

<div class='container'>
  <div class='div1'>This is div 1</div>
  <div class='div2'>This is div 2</div>
</div>