2

我正在开发一个完全适合浏览器窗口的网站。以下是网站布局的基本蓝图：

网站示例 到目前为止，红色区域只是 display:block。绿色区域也是 display:block with margin-right:200px。蓝色区域（嵌套在 div 中）是 float:right。

所以我已经对宽度进行了排序。这是我需要建议的高度。红色和深蓝色区域是设定的高度，但我需要绿色和浅蓝色区域来适应浏览器窗口视图的高度。

我正在尝试使用 box-sizing，但它超出了窗口视图的高度，因为它延伸到了窗口的最大高度。对不起，我的解释很糟糕。任何建议如果会很好。谢谢！

4

5 回答 5

4

对于绿色 div 集height: calc(100%-{red-div-height});和浅蓝色 div 集height: calc(100%-{dark-blue-div-height}-{red-div-height});

于 2013-07-17T08:56:52.293 回答
2

这有点像 C-Link 答案的旧版本。

jsFiddle和全屏

这限制了任何内容低于一页满落在其容器之外（您可以查看是否在小提琴中向下滚动，但不能在全屏上滚动）。

确保我们的页面伸展到全高。

body, html { height: 100%; width: 100%; margin: 0; padding: 0;}

设置静态高度标题。

header {
    height: 101px;
    background: red;
}

为标题下的所有内容创建一个框。你在盒子大小方面走在了正确的轨道上。我们可以向它添加填充，其数量与我们的标题相同。然后它里面的百分比很好地工作。 

.content {
    position: absolute;
    box-sizing: border-box;
    padding-top: 111px;
    padding-bottom: 10px;
    top: 0; left: 0;
    height: 100%; width: 100%;
}

我们将我们放在一边（可能是也可能不是正确的元素，取决于内容）并在其上设置一些样式。

aside {
    float: right;
    width: 20%;
    height: 100%;
    padding-bottom: 111px;
    box-sizing: border-box;
}

.top {
    height: 100px;
    background: blue;
}

.bottom {
    margin-top: 10px;
    height: 100%;
    background: skyblue;
}

这是我们主要的大型内容区域，我们将其浮动到左侧。如果我们想要以额外 HTML 为代价的精确填充，则可以精确指定宽度。

[role="main"] {
    width: 78%;
    background: limegreen;
    height: 100%;
    float: left;
    box-sizing: border-box;
}

您还可以设置overflow-y: auto我们的主要或辅助元素，让它们在空间不足时滚动。该页面还应该有移除浮动、绝对定位、绝对样式的移动样式，并且宽度应该接近 100%。

于 2013-07-17T09:28:20.050 回答
0

你能不能只根据它们的目的给 div 一个最大或最小高度？

我使用其他将包含在其中的主容器或包装器 div，然后该 div 是我的有效页面或屏幕区域。

<div id="wrapper">
    <div id="content">
        <div id="sidebar">
        </div>
    </div>
 </div>

#wrapper{
    min-height: Whatever value you want here;
    max-height: Whatever value you want here;
}

使用主容器 div 设置页面可能是个好主意，它只对内容热，但对页眉和页脚也是如此。

例如，我有一个主包装器，它是整个页面，其中包含页眉 div、内容 div、导航 div 和页脚 div。这些是主要的。然后其他所有内容都可以包含在其中。

因此，您可以使用百分比来设置布局，这样您就有了一个可以对每个浏览器尺寸做出反应的流畅设计。然后，其他元素将“适合”在主 div 中并被限制在其中。您可能需要研究定位等，但这肯定是您应该朝着的方向。

<div id="wrapper">
<div id="header">Header Here including any divs to be contained within this space</div>
<div id="content">All content etc here</div>
<div id="nav">This is your sidebar</div>
<div id="footer">Footer, as per header</div>
</div>

然后使用 css 重新设计上面的布局，只关注那些主要的 div。使用 % 而不是 px 来保持流动性。

#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}
于 2013-07-17T08:47:40.773 回答
0

您始终可以将绿色框高度设置为窗口高度减去红色框高度。

相应地，灯箱高度到窗口高度减去（红色框高度 + 深蓝色框高度）

编辑1：我没有提到必须用javascript完成。

编辑 2：也考虑任何填充和边距。

于 2013-07-17T08:52:48.357 回答
0

一个非常常见的技巧是给绿色（和浅蓝色）框绝对定位，填充和负边距。因为 100% 宽度是相对于包含框（可能是父 div，或者只是窗口本身），所以这是不合适的。当标题是一个相对高度时，比如 10%，这很容易。填充确保内容不会在标题后面消失，负边距将框放回原处。不要忘记 z-index（否则内容（绿色部分）将与标题重叠）。

CSS看起来像这样：

.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }

小提琴看起来像这样：http: //jsfiddle.net/2L7VU/

于 2013-07-17T09:15:54.417 回答