爲什麼我不能使絕對的高度100％

我有問題，我有一個固定的容器，在他們裏面我有絕對的div，我想設置.absolute div height:100%;爲容器div的全高（500px）。下面是我試圖解決我的問題，這需要，因爲我想創建與切換容器的手機菜單，其重要的是我的手機屏幕高度爲100%。爲什麼我不能使絕對的高度100％

https://jsfiddle.net/d1bh9ncs/

HTML

<div class="container"> 
    <div class="fixed"> 
    <div class="absolute"> 

    </div> 
    </div> 
</div>

CSS

.container{ 
    width:100%; 
    height:500px; 
    background-color:#ddd; 
} 
.fixed{ 
    position:fixed; 
    width:100%; 
    height:50px; 
    background-color:red; 
    top:8px; 
    left:8px; 
    right:15px; 
} 
.absolute{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    background-color:green; 
    top:51px; 
    left:0px; 
}

來源

2016-08-01 ml92

你的.fixed div的高度爲50px，而你的.absolute div的100％相對於.fixed，所以他也有50px的高度。 – sticksu

你可以使用'height：100vh;'爲'。絕對' –

父DIV .fixed絕對定位，並具有高度50像素。因此，在其子節點上應用height: 100%將繼承相對高度（即50px）。

在.absolute上使用height: 100vh;。我使用了計算高度height: calc(100vh - 51px)來避免由於top: 51px而導致的滾動條。

注意：vh是視口高度的1/100（可見網頁高度）。

Updated Fiddle

.absolute { 
    position: absolute; 
    height: calc(100vh - 51px); 
    width: 100%; 
    background-color: green; 
    top: 51px; 
    left: 0px; 
}

來源

2016-08-01 12:52:22 Pugazh

儘量給高度VH。把.absoluteheight = 100vh

.absolute 
{ 
position:absolute; 
height:100vh; 
width:100%; 
background-color:green; 
top:51px; 
left:0px; 
}

https://jsfiddle.net/bj9wcdLs/

來源

2016-08-01 12:47:52 Abhishek

你應該解釋一下vh/vw和％ –

之間的區別，但是OP想要「full container of container div（500px）」 – blonfu

'vh'代表'viewport-height'這是'css3單元'（不好瀏覽器支持）並且與視口相關（如術語所述）。從另一方面來看，百分比與他們的父母有關......在這裏看看可能是件好事：http://webdesign.tutsplus.com/articles/7-css-units-you-might-not -know-about - cms-22573 – Hitmands

就像sticksu說。

更改代碼

.fixed{ 
    position:fixed; 
    width:100%; 
    height:100%; //must be 100% 
    background-color:red; 
    top:8px; 
    left:8px; 
    right:15px; 
}

來源

2016-08-01 12:50:50

將'.fixed'的高度更改爲100％將覆蓋整個視圖端口（即不會看到其他內容） – Pugazh

您正在使用固定股利作爲絕對的div的父格，絕對的div可以有固定的div的100％，如果你在增加高度值不能明顯地延伸到其父的高度Percentage.If你想讓它擴展爲父母身高，你必須在PX增加高度（像素）

.container{ 
    width:100%; 
    height:500px; 
    background-color:#ddd; 
} 
.fixed{ 
    position:fixed; 
    width:100%; 
    height: 101px; 
    background-color:red; 
    top:8px; 
    left:8px; 
    right:15px; 
} 
.absolute{ 
    position:absolute; 
    height: 117px; 
    width:100%; 
    background-color:green; 
    top: 0px !important; 
    left:0px; 
    z-index: 99999999; 
    top: 50px; 
}

來源

2016-08-01 12:53:25

這樣做的一個更現代的方法是使用VH和VW（查看高度和寬度）。而不是其父級的百分比（如％）是整個頁面的百分比。

在下面的例子中，我已經做了一些calc來幫助確定我們真正想要的東西的大小。

example = function() { 
 
    var abSel = document.querySelector(".absolute"); 
 
    abSel.classList.toggle('hidden'); 
 
}

body { 
 
    margin: 0; 
 
} 
 
.container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: #ddd; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    width: calc(100vw - 16px); 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    background-color: red; 
 
    top: 8px; 
 
    left: 8px; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    border-top: 1px solid #ddd; 
 
    height: calc(100vh - 59px); 
 
    width: calc(100vw - 16px); 
 
    background-color: green; 
 
    top: 50px; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<div class="container"> 
 
    <div class="fixed"> 
 
    <button onclick="example()">Example</button> 
 
    <div class="absolute hidden"></div> 
 
    </div> 
 
</div>

希望這有助於。

來源

2016-08-01 13:01:13

爲什麼我不能使絕對的高度100％

回答

相關問題