在任何浏览器屏幕尺寸下设置设计，无需滚动答案

【问题标题】：Setting design in any browser screen size without scroll在任何浏览器屏幕尺寸下设置设计，无需滚动
【发布时间】：2015-09-08 21:19:25
【问题描述】：

我需要设计一个带有 html、bootstrap 等的网站。主要标准是在任何浏览器窗口大小中都不必出现滚动条。图像和其他必须为此进行调整。画面是这样的：。

请帮帮我。

【问题讨论】：

标签： jquery html css twitter-bootstrap responsive-design

【解决方案1】：

这是一个艰难的过程。你必须对高度使用媒体查询，考虑流行的高度，并使中间高度状态的元素不会溢出你的屏幕。我建议您使用以下媒体查询并相应地调整您的每个元素：

@media (min-height: 1200px) {
    .banner{ height: 760px; } //example
}

@media (min-height: 1080px) {
    .banner{ height: 600px; } //example
}

@media (min-height: 900px) {
    .banner{ height: 560px; } //example
}

@media (min-height: 800px) {
    .banner{ height: 440px; } //example
}

@media (min-height: 768px) {
    .banner{ height: 400px; } //example
}

@media (min-height: 600px) {
    .banner{ height: 300px; } //example
}

【讨论】：

【解决方案2】：

那时您可以使用基于百分比的维度。

在本例中，我将页眉设置为高度的 20%，容器设置为 60%，页脚设置为 20%。所以我的窗口的高度并不重要，因为它是高度的百分比。

下面的例子：

body,html{
  height: 100%;  
}
header{
  background-color: yellow;
  height: 20%;
  width: 100%;
}
#container{
  width: 100%;
  height: 60%;
  background-color: cyan;
}
footer{
  width: 100%;
  height: 20%;
  background-color:red;
}

<header></header>
<div id="container"></div>
<footer></footer>

【讨论】：

【解决方案3】：

您可以尝试在 CSS 选择器中为高度属性使用相对值。例如：

#content {height: 77%;} #footer {height: 22%;}

它将强制您的容器适应窗口大小。

【讨论】：

【解决方案4】：

您需要将 媒体查询 放入您的 CSS 文件中。如下图

@media tv and (min-width: 700px) and (orientation: landscape) { ...  }

参考：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

【讨论】：