最小高度：100％;高度：100％;不工作

我無法弄清楚我的風格有什麼問題。
希望有人能幫助我。
代碼示例：最小高度：100％;高度：100％;不工作

<style type="text/css"> 
.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; min-height:250px; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
<div class="maindiv"> 
    <div class="left_inner">Left Block content</div> 
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

的方式應該是像在Opera瀏覽器（見圖片）： Sample image

來源

2012-01-09 wzazza

你有一個DOCTYPE HTML的？ – 2012-01-09 15:01:03

@MrLister：如果他沒有，他可以參考：http://www.w3schools.com/tags/tag_doctype.asp – 2012-01-09 15:02:29

是的我有文檔類型： <！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN「」http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd「> – wzazza 2012-01-09 15:04:21

該如何

http://jsfiddle.net/L9GEa/

的爲什麼

有人可能會認爲直覺（我曾經做過）的HTML元素已具有確定的高度，但它沒有（在這種情況下，至少）。幸運的是（或通過設計）這個元素具有其高度在被賦予百分比高度時可確定的獨特屬性。這是基本的概念，因爲爲了計算（確定）任何其他被賦予百分比高度的元素的高度，您還必須能夠確定它的父級的高度。
任何與CSS和DOM合作的人都可能會告訴你他們討厭浮動。這是因爲它將元素從流程中拉出來，這需要額外的工作和思考來處理效果。而是使用display：inline-block; vertical-align：top;有一點需要注意的是，你必須在這些元素之間的任何空白處添加html註釋。

的CSS

.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px;min-height:250px; 
    /*changes*/ 
    height:100%; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
    /*changes*/ 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
    /*changes*/ 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
} 
/*changes*/ 
html, 
body{ 
    height:100%; 
}

<div class="maindiv"> 
    <div class="left_inner">Left Block content</div><!-- 
    --><div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

來源

2013-09-14 05:40:02

此解決方案適用於我，所以我將其標記爲最佳答案。謝謝。 – wzazza 2013-09-18 16:10:35

根據我的經驗，刪除html註釋並將字體大小設置爲0，在你的內部容器/元素上設置字體大小，並且使用off-off顯示內聯塊。 1rem – Ghost1 2017-09-20 08:47:14

試試這個：

<style type="text/css"> 
.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; height: auto; min-height:250px; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; height: 100%; background:#00CC33; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
<div class="maindiv"> 
    <div class="left_inner">Left Block content</div> 
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

大多數時候，你必須時刻對父DIV應用自動或100％的高度。

來源

2012-01-09 14:59:45

作品中內聯元素之間的空白區域，以及外部div的像素高度。 – danijar 2012-01-09 15:05:57

這沒有奏效。 – wzazza 2012-01-09 15:09:06

@sharethis：如果在像素基上應用該值，則無法達到100％的CSS規則。 – 2012-01-09 15:11:25

添加

html, 
body { 
    height:100% 
}

在你的CSS的頂部，這對我的作品

編輯：我的測試：

<!DOCTYPE html> 
<html> 

<head> 
<style> 
html, 
body { 
height:100%; 
} 

.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; height:100%; 
position:relative; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
position:relative; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
</head> 
<body> 
<div class="maindiv"> 
<div class="left_inner">Left Block content</div> 
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div> 
</body> 
</html>

來源

2012-04-04 03:09:29 Michel

最小高度：100％;高度：100％;不工作

回答

相關問題