css流體佈局問題

嗨，大家好我已經設法創建我的CSS佈局，但每當我嘗試將body_second和body_third設置爲100％時，它會導致屏幕溢出。我不想在任何情況下調用滾動條。css流體佈局問題

我想的CSS佈局來調整窗口大小，而無需任何溢出的http://biblia.com/所看到*嘗試調整窗口的大小在不同瀏覽器的網站上時，我試圖做到同樣的事情！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<title>100% Height CSS Layout</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style type="text/css"> 
* { 
    padding: 0; 
    margin: 0; 
} 
html, body { 
    height: 100%; 
    width: 100%; 
    background-image:url(main_bg.png); 
} 
body { 
    font-family: "lucida sans", verdana, arial, helvetica, sans-serif; 
    font-size: 75%; 
} 
h1 { 
    font-size: 1.4em; 
    padding: 10px 10px 0; 
} 
p { 
    padding: 0 10px 1em; 
} 
#container { 
    min-height: 100%; 
    border-left: 0px solid #666; 
    border-right: 0px solid #666; 
    padding: 0px 40px 0px 40px; 
    margin: 0 auto; 
} 
* html #container { 
    height: 100%; 
} 
#header { 
    height: 40px; 
    width: 100%; 
} 
.header_column { 
    position: absolute; 
    padding-top: 10px; 
} 
#header_second { 
    margin-left: 50%; 
    color:#FFF; 
} 
#header_third { 
    margin-left: 80%; 
    color:#FFF; 
} 
#body { 
    height: 100%; 
    width: 100%; 
    margin-top: -2px; 
} 
.body_column { 
    position: absolute; 
    background-color:#FFF; 
    height: 100%; 
    overflow: auto; 
} 
#body_first { 
    width: 22%; 
    background-color: #EAEAEA; 
    min-height: 60%; 
} 
#body_second { 
    margin-left: 22%; 
    width: 36%; 
    background-color:#FFF; 
    min-height: 85%; 
    max-height: 90%; 
} 
#body_third { 
    margin-left: 58%; 
    width: 36%; 
    border: 1px; 
    background-color: #919191; 
    min-height: 85%; 
} 
#footer { 
    margin-top: 70%; 
    position: absolute; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="header"> 
    <div id="header_first" class="header_column"><img src="header_logo.png" width="35" height="16" border="0"></div> 
    <div id="header_second" class="header_column">asdas</div> 
    <div id="header_third" class="header_column">asdas</div> 
    </div> 
    <div id="body"> 
    <div id="body_first" class="header_column">asdas</div> 
    <div id="body_second" class="header_column">asdas</div> 
    <div id="body_third" class="header_column">asdas</div> 
    </div> 
    <div id="footer">asdas</div> 
</div> 
</body> 
</html>

來源

2011-02-04 methuselah

這是您的利潤！如果將set＃body_second的寬度設置爲其父寬度的100％，則添加margin-left：22％（基本上將其偏離父級的左側22％）..一起..它會溢出，因爲這會累加> 100％。

來源

2011-02-04 09:39:27

css流體佈局問題

回答

相關問題