调整身高以适应屏幕，即使内容更短？

-1

不知道如何去做这件事。基本上，我的页面有一个包含在包装中的标题，导航，正文和页脚，所有这些都包含在正文中（当然）。包装被设置为填充屏幕的60％并居中。标题，导航和页脚永远是相同的高度，并简单地填充包装，宽度。调整身高以适应屏幕，即使内容更短？

然而，主要部分具有可变长度的内容（段落，图像，文章，部分等）。如果我在主要部分中有很多内容，页面会填满，伸展并像平常一样滚动。但是，如果我的主要内容只有一点点，页面不够长，页脚会在屏幕的一半左右结束（或者在主界面之后需要更高的页面）。

我想要做的是确保身体和/或包装伸展以填充屏幕的高度，即使主要部分不一定足够长以迫使它变得高度。我已经试过制作身体和包装height: 100%但包装仍未延伸。如果我将页脚设置为position: fixed，则页脚大小会偏差，并且包装器边界不会向下延伸。

鉴于这些问题，我认为最好的解决办法是以某种方式增加主节的高度，使它和其他元素始终加起来至少为100％，但我无法弄清楚如何做到这一点。这一直困扰我一个星期，所以任何帮助将不胜感激！

来源

2015-02-09 POWERTRON_009

你可以创建一个jsfiddle来展示你的问题？ – Timmerz 2015-02-09 05:04:12

你可以设置一个最小高度为CSS – anpsmn 2015-02-09 06:39:42

Timmerz的内容，这里有一个JSFiddle链接给你：http://jsfiddle.net/378feuLu/ Anpsmn，在主要部分设置最小高度并不能解决问题。 – 2015-02-10 03:51:15

这可能工作。它只是设计你的身体标记，你的包装和HTML来填充容器的高度。

html, body, #wrapper { 
    height: 100%; 
}

我不认为我可以比没有简化版本的HTML/CSS更具体。

- 编辑 -

我从一个工作示例分叉您JSFiddle。我所做的只是将上面的代码片段添加到CSS中。

来源

2015-02-09 05:01:08 Eclecticist

不幸的是，将高度设置为100％并不会使div伸展超出内容的高度。它使html和body扩展为匹配屏幕高度，但不是div或其内容。查看此JSFiddle了解更多信息：http://jsfiddle.net/378feuLu/ – 2015-02-10 03:55:14

我添加了一个使用我的代码片段的例子。有用：） – Eclecticist 2015-02-10 12:28:31

作为折衷主义者已经说过。你需要将你的html和body设置为100％的高度。这是必要的，因为wrapper元素继承父级的高度。因此，将包装设置为100％ - 高度永远不会大于它的父级。除了Eclecticists回答我建议你设置最小高度到100％这样的内容不会从容器中尽快运行作为包装超过了窗口高度：

html, body { 
    height: 100%; 
} 
#wrapper { 
    min-height: 100%; 
}

来源

2015-02-12 17:13:32

调整身高以适应屏幕，即使内容更短？

回答

相关问题