具有固定和液體列的CSS布局
[英]CSS layout with fixed and liquid columns
問題描述
我在創建一個部分流動的布局時遇到了問題。 布局必須有100％的寬度和高度，但它不應該有滾動條（overflow：hidden;）。
在上圖中顯示了我想要實現的目標。 如你看到的：
- 標題必須固定 - 110px，寬度為100％。
- 兩個div通過容器div包裹。 藍色的一個需要固定寬度130px和100％高度，而綠色一個需要液體寬度和100％高度。
這是我目前的代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
.spacer {
clear: both;
}
#header {
background: black;
width: 100%;
height: 100px;
float: left;
}
#content {
height: 88%;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
}
#left {
background: #1664a0;
height: 100%;
width: 100px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
float: left;
width: 91%;
}
</style>
</head>
<body>
<div id="header">
My Header
</div>
<div class="spacer"></div>
<div id="content">
<div id="left">Left container</div>
<div id="right">Right container</div>
</div>
</body>
</html>
這段代碼有幾個問題：
- 它不適用於各種分辨率（800x600,1024x768,1280x1024等）
- “content”div並不總是將頁面填充到最后。
- 如果您將頁面調整為較低分辨率，綠色div將低於藍色div。
我想我可能在這里做了一些可怕的錯誤，但我不是設計師所以有人能指出我解決這個問題的“正確方法”嗎？
2 個解決方案
解決方案1
4 已采納 2012-04-19 23:47:09
看看這里http://jsfiddle.net/bmqPV/2/
左邊設置為100px，右邊設置為91％，所以如果100px大於9％，它將轉到下一行。
編輯，這是一個新的小提琴http://jsfiddle.net/bmqPV/4/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
.spacer {
clear: both;
}
#header {
background: black;
width: 100%;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
z-index:3;
}
#content {
height: 100%;
width: 100%;
padding: 0;
margin: 0px;
position: relative;
}
#left {
background: #1664a0;
height: 100%;
width: 100px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
width: 100%;
}
#wrapper
{
position: relative;
height: 100%;
width: 100%;}
.contentcontainer {
padding-top:100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
My Header
</div>
<div id="content">
<div id="left">
<div class="contentcontainer">Left container</div>
</div>
<div id="right">
<div class="contentcontainer">Right container</div>
</div>
</div>
</div>
</body>
</html>
解決方案2
0 2012-04-20 05:07:25
你可以通過一個簡單的CSS定義有更好的理解，請參閱簡單的代碼＃內容和#right位置實現你的結果： -
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
{
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
#header {
background: black;
height: 100px;
}
#content {
width:100%;
border:5px solid red;
overflow:hidden;
position:relative;
}
#left {
background: #1664a0;
height: 100%;
width: 130px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
float: left;
width:100%;
position:absolute;
margin-left:130px;
}
</style>
</head>
<body>
<div id="header">
My Header
</div>
<div id="content">
<div id="left">Left container</div>
<div id="right">Right container</div>
</div>
</body>
</html>
帶兩個液柱的無表布局（液體 - 固定 - 液體）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.