流體寬度/ CSS問題

我不能讓主內容區域（藍色）正確對齊。（紅色）有一個流體，側邊欄（黃色）有一個流體高度，主要內容區應該是流體寬度和高度，但我無法弄清楚如何使它正確對齊。

它應該在寬度方向上與標題對齊。

任何人都可以看到我的問題是什麼？

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<title>Title of document</title> 
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"></meta> 
<meta http-equiv="Content-Type" content="text/css; charset=utf-8"></meta> 
<link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 

<body> 
    <div id="header"></div> 
    <div id="main"><!--<iframe src="http://www.cnn.com/"/> --></div> 
    <div id="sidebar"></div> 
</body> 

</html>

CSS：

body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 

#header{ 
    height: 80px; 
    border: 1px solid black; 
    padding: 5px; 
    margin-top: 5px; 
    margin-left: 5px; 
    margin-right: 5px; 
    background-color:red; 
} 

#main{ 
    position:absolute; 
    left:0; 
    top:90px; 
    right: 263px; 
    padding:0; 
    margin-top: 12px; 
    margin-left: 5px; 
    margin-bottom:5px; 
    height:99% !important; /* works only if parent container is assigned a height value */ 
    width:100%; 
    border:1px solid black; 
    background-color:blue; 
} 

iframe{ 
    margin: 5px; 
    display:block; 
    width:100%!important; 
    height:100%!important; 
} 

#sidebar{ 
    position:absolute; 
    right:0; 
    top:102px; 
    padding:0; 
    margin-right:5px; 
    margin-bottom:5px; 
    width:250px; 
    height:99%; /* works only if parent container is assigned a height value */ 
    border:1px solid black; 
    background-color:yellow; 
}

instructions

來源

2012-08-22 Ken

你能給我更詳細意味着什麼「對齊正確「？ –

剛剛上傳了一張圖片以顯示更好;）謝謝，Ken – Ken

另外，新網頁不應該使用過渡文檔類型。 Transitional適用於在過渡到嚴格時包含較舊的棄用標記的那些頁面。但是你不應該使用不贊成的標記。 – Rob

由於它們很少或沒有變數，這可以通過依賴position: absolute輕鬆解決，而不會影響靈活性。

的HTML：

<header class="header"></header> 

<div class="content"> 
    <iframe src="http://www.cnn.com/"></iframe> 
</div> 

<div class="sidebar"></div>

的CSS：

* { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.header, 
.content, 
.sidebar { 
    position: absolute; 
    border: 1px solid black; 
} 

.header { 
    top: 5px; 
    right: 5px; 
    left: 5px; 
    height: 80px; 
    background: red; 
} 

.content, 
.sidebar { 
    top: 90px; 
    bottom: 5px; 
} 

.content { 
    left: 5px; 
    right: 260px; 
} 

.content iframe { 
    width: 100%; 
    height: 100%; 
} 

.sidebar { 
    right: 5px; 
    width: 250px; 
    background: green; 
}

看看這裏：http://jsfiddle.net/joplomacedo/WBRCj/

來源

2012-08-22 02:30:40 banzomaikaka

完美！非常感謝JOPLOmacedo :) – Ken

像這樣的事情？

HTML：

<div id="header"></div> 
<div id="main"></div> 
<div id="sidebar"></div>

CSS：

#header { 
    height: 60px; 
    background: red; 
    margin-bottom: 10px 
} 
#main { 
    width: 68%; 
    background: blue; 
    float: left; 
    height: 800px; 
} 
#sidebar { 
    width: 30%; 
    background:yellow; 
    float: right; 
    height: 800px; 
}

而且Fiddle

附：不確定是否將其從當前網站或您的圖片發佈出來，因爲兩者似乎都遵循不同的概念。現在形象。

來源

2012-08-22 00:47:51 mash

主側欄和側欄高度應該是流暢的。將這些從800px改爲100％都行不通？ – Ken

我編輯了這個網站（和上面的代碼），現在看起來更接近圖像，甚至沒有意識到頭部沒有跨越整個頁面：/ – Ken

所有真正需要完成的是獲得主區域（藍色）與其上方的標題對齊，寬度方向）並仍然是流動的。 – Ken

流體寬度/ CSS問題

回答

相關問題