Div中的Div

Question

我有这个问题，我把一个div放在一个div里，我把"title“放在高度50，然后在它下面放"navbar”，所以我把高度设为100%，虽然它不是停留在div内，它实际上偏离了div，并使滚动条出现。

我喜欢“站点”的墙壁，然后所有其他的div适合在该div。

    <div id="site">
        <div id="title">TitleBar</div>
        <div id="navbar">NavBar</div>
        <div id="frame">FrameBar</div>
    </div>
body{
    margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}

我找到了一张图片，上面有类似的东西。http://img176.imageshack.us/img176/4637/picture1zb1.png

Answer 1

这是因为100%的高度实际上意味着“使用与容器相同的高度”。

但是我并没有完全理解你对这个布局的要求，如果你的导航栏是一个导航栏，那么它的设计应该允许滚动条在内容太大的时候出现。

但是我认为你使用了错误的结构来完成这个任务，你想要一个包装器div有什么实际的原因吗？我已经在这上面创建了一个小提琴，检查它是否更接近你想要的：http://jsfiddle.net/6g6HV/2/

另一个是你的，如果你想玩它的话：http://jsfiddle.net/yq8PS/3/

编辑:将javascript解决方案添加到answer http://jsfiddle.net/6g6HV/9中

Answer 2

通过将float属性添加到css，可以使HTML中的各个部分并排显示。

#navbar{
    border: 1px solid #c38a8a;
    width: 200px;
    height: 100%;
    float: left;
}

此外，一定要在尺寸后面加上'px‘单位。现代浏览器假定您指的是px，但旧浏览器可能不是这样的。

当你的侧边栏有一个设定的像素宽度时，没有一个好的方法来防止重叠。要实现液体宽度(或流体宽度)样式，您必须在#帧的左侧添加负200px边距(以对抗侧边栏)。然后，在#frame中添加另一个do来为该部分设置样式。这就是我在我的网站上实现外观的方式，也是在之前的默认Drupal主题(Garland)中使用的解决方案。

#frame{
    margin-left: -200px;
}

Answer 3

在这种情况下，导航栏的100%并不意味着剩余高度，而是父对象可见高度的100%；因此，如果父对象的高度为400px，那么导航栏的高度也将为400px。如果将标题栏的高度与此大小相加，则会得到一个大于父级大小的合计值；因此，排列栏的外观会有所不同。

虽然宽度通常不会影响整个屏幕的长度，但在HTML和CSS中很难做到同样的高度，因为它们不是为这种事情而设计的；特别是对于叠加式结构(div中的div)。

有些人会使用Javascript来获得屏幕(浏览器)的大小，并相应地计算对象的大小，但我不知道你是否可以用纯HTML/CSS解决方案做同样的事情；特别是如果你想让你的解决方案跨多个浏览器兼容。

有关更多信息，请查看http://www.tutwow.com/htmlcss/quick-tip-css-100-height/