Question

我遇到了这个问题，我在div中放置了一个div，我将“标题”定位为高度50，然后将“navbar”定位在它下面，所以我把高度设为100％问题是，它不会停留在div中，它实际上会偏离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

通过向css添加float属性，可以使HTML中的分区相互并排显示。

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

此外，请始终在尺寸后添加“px”单位。现代浏览器假设您的意思是px，但旧的浏览器可能不是。

如果侧边栏是设置的像素宽度，则无法防止重叠。要获得液体宽度（或流体宽度）样式，您必须在左侧添加负200px边距到#frame（到计数器侧边栏）。然后，在#frame中添加另一个divsion来为该部分进行样式设置。这就是我在我的网站上看到的外观，它也是以前默认的Drupal主题（Garland）中使用的解决方案。

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

Answer 2

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

但是我没有完全满足您对此布局的所有要求，如果您的导航栏是导航栏，它的设计应允许在内容太大时显示滚动条。

但是我觉得你要用错误的结构来实现这个目标，你有没有想要一个包装div的真正原因？我已经创建了一个小提琴，检查它是否更接近你想要的：http://jsfiddle.net/6g6HV/2/

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

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

Answer 3

在这种情况下，Navbar的100％并不意味着剩余的高度，而是父母的可见高度的100％;因此，如果父级的高度为400px，则Navbar的高度也为400px。如果将标题栏的高度添加到此大小，则总值将大于父级的大小;因此，scolling酒吧的外观。

虽然宽度通常没有任何问题，但它似乎可以填满整个屏幕的长度，但在HTML＆amp; CSS也是如此，因为它们没有为这类东西设计高度;特别是有一个叠瓦的结构（div里面的div）。

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

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

划分Div

3 个答案: