Question

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

Website example 到目前为止，红色区域只是显示：块。绿色区域也显示：具有边距右侧的块：200px。蓝色区域（嵌套在div中）是浮动的：右边。

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

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

Answer 1

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

Answer 2

这是C-Link答案的遗留版本。

jsFiddle和fullscreen

这有限制任何内容低于一页 - 完全落在其容器外（你可以看到你是否在小提琴中向下滚动，但不是在全屏幕上向下滚动）。

确保我们的页面延伸到最大高度。

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％。

Answer 3

你能不能根据目的给出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，nav 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%
}

Answer 4

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

因此，灯箱高度与窗户高度减去（红色框高度+深蓝色框高度）

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

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

Answer 5

一个很常见的技巧是给绿色（和浅蓝色）框绝对定位，填充和负边距。因为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/

网站布局建议

5 个答案:

jsFiddle和fullscreen