爲什麼百分比高度在我的CSS中不起作用？

我知道這已被問了很多次，但我試圖讓一個元素的％高度工作。我的理解是，如果父元素具有指定的高度，那麼應該在子元素上設置％高度。不幸的是，我試圖讓這個工作，但我必須失去一些東西。爲什麼百分比高度在我的CSS中不起作用？

body{ 
    border-radius: 10; 
    height: 100%; 
    position: relative; 
} 

.child-element{ 
    height: 50%; 
    margin: none; 
    background-color: gray; 
}

哪裏有：

<body> 
    <div class="child-element"> 
    </div> 
</body>

來源

2015-10-05 Linda Keating

它的工作原理：http://jsfiddle.net/59x6dqhh/ – Manolo

有幾個語法錯誤應更正爲：1）'邊界半徑：10'你需要添加'px'或所以即'邊界半徑：10px'，但你將無法在你的演示中看到它，因爲它全部是白色的。 2）'margin：none'無效，同樣需要一個值，即'margin：0'或'0px'等。 – Stickers

沒有爲body標籤的父元素html也需要height進行設置。

html { 
    height: 100%; 
}

下面的簡化演示（刪除不必要的規則並重置默認的體邊距）。

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.child-element { 
 
    height: 50%; 
 
    background-color: gray; 
 
}

<body> 
 
    <div class="child-element"></div> 
 
</body>

來源

2015-10-05 15:57:12 Stickers

試過 - 但仍然沒有快樂。謝謝 –

查看上面更新的演示。 – Stickers

這真是太棒了 - 謝謝 - 我沒有說過的是body元素和子元素之間有一個容器元素，其高度沒有被指定。這打破了高度鏈，因此子元素不起作用。在容器元素上設置高度意味着它的工作。謝謝 –

如果目的是呈現可用的瀏覽器客戶端區域爲包含一個單一的內容矩形（而不是具有高一個滾動），我喜歡做：

body { 
top: 0; left: 0; right: 0; bottom: 0; 
overflow: hidden; position: overflow; 
}

如果目標是有一個從無到有構建高度的子面板，那麼您需要知道，對象的高度基於父寬度，而不是基於對象不是絕對或固定位置時的高度。它可能建立一個正方形如下：

.square { 
 
width: 20em; 
 
    background: cyan; 
 
} 
 
.square:before { 
 
    content: ''; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    padding-top: 100%; 
 
    float: left; 
 
} 
 
.square:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 
}

<div class="square">Square</div>

可以通過改變填充量改變塊的寬高比。

希望這會有所幫助。

馬克

來源

2015-10-05 16:08:00

爲什麼百分比高度在我的CSS中不起作用？

回答

相關問題