流体宽度/ CSS问题

Question

I am attempting to layout a site: 我正在尝试布局网站：

http://kenzshop.com/Brandon/index http://kenzshop.com/Brandon/index

I cannot get the main content area (blue colored)to align correctly. 我无法正确对齐主要内容区域（蓝色）。

The header (red) has a fluid with, the sidebar (yellow) has a fluid height, the main content area should be fluid width and height, but I cannot figure out how to get it to align correctly. 标题（红色）有流体，侧边栏（黄色）有流体高度，主要内容区域应该是流体宽度和高度，但我无法弄清楚如何使其正确对齐。

It should align width-wise with the header. 它应该与标题在宽度方向上对齐。

Can anyone see what my issue is? 任何人都可以看到我的问题是什么？

HTML: 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: 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;
}

Answer 1

Something like this? 像这样的东西？

HTML: HTML：

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

CSS: 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;
}

And the Fiddle 和小提琴

PS Wasn't sure whether to base it off your current site, or your image posted, as both seem to follow different concepts. PS不确定是基于当前网站，还是发布您的图片，因为两者似乎都遵循不同的概念。 Did image for now. 好像现在。

Answer 2

Since their are little to no variables, this is easily solved by relying on position: absolute , without affecting flexibility. 由于它们几乎没有变量，因此可以通过依赖position: absolute来轻松解决，而不会影响灵活性。

The HTML: HTML：

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

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

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

The CSS: 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;
}

Take a look at it here: http://jsfiddle.net/joplomacedo/WBRCj/ 看看这里： http ： //jsfiddle.net/joplomacedo/WBRCj/

流体宽度/ CSS问题

问题描述

2 个解决方案

解决方案1
2 2012-08-22 00:47:51

解决方案2
2 已采纳 2012-08-22 02:30:40

流体宽度/ CSS问题

问题描述

2 个解决方案

解决方案1 2 2012-08-22 00:47:51

解决方案2 2 已采纳 2012-08-22 02:30:40

解决方案1
2 2012-08-22 00:47:51

解决方案2
2 已采纳 2012-08-22 02:30:40