流体宽度/ 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问题

回答

相关问题