html - 在 CSS/HTML 中为不同的屏幕尺寸设置自动高度和宽度

Question

我对这个布局有 2 个问题:

1. .feature_content(灰色背景)使其高度和宽度适应不同的屏幕尺寸。现在，在大屏幕上 .feature_content 离页脚很远。
2. 无论屏幕大小如何，我都想删除一个水平滚动条。

我想:将 .feature_content 调整为剩余高度并移除水平滚动条。

这是一个 FIDDLE

还有我的代码:

HTML :

<div id="container">
    <div id="header">Header added just for demonstration purposes</div>
    <div id="content">Your content goes here
        <div class="featured_content"></div>
    </div>
</div>
<div id="footer">Footer here</div>

CSS:

* {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
}
body, html {
    width:100%;
    min-height: 100%;
}
div {
    height:100%;
    width:100%;
    border:5px solid black;
}
#header {
    background-color:orange;
}
#container {
    background:blue;
    margin: 0 auto;
    position: relative;
    height: auto !important;
}
#content {
    background:pink;
    padding-bottom: 100px;
    margin: 0 auto;
    position: relative;
}
#footer {
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    height: 70px;
    left: 0;
    position: fixed;
    z-index: 100000;
    background:green;
}
.featured_content {
    min-height: 750px;
    max-height: 750px;
    width:200px;
    background-color:grey;
    position:fixed;
    margin:auto 0px;
    margin-top: 150px;
}

Answer 1

这就是你想要的？ DEMO .尝试缩小浏览器的窗口，您会看到元素将被排序。

我用了什么？ flex 盒模型或 Flexbox。

只需将以下 CSS 类添加到您的容器元素(在本例中为 div#container):

flex-init-setup 和 flex-ppal-setup。

地点:

1. flex-init-setup 表示 flexbox 初始化设置；和
2. flex-ppal-setup 表示 flexbox principal setup

这是 CSS 规则:

 .flex-init-setup {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }
 .flex-ppal-setup {
     -webkit-flex-flow: column wrap;
     -moz-flex-flow: column wrap;
     flex-flow: column wrap;
     -webkit-justify-content: center;
     -moz-justify-content: center;
     justify-content: center;
 }

要乖， 莱昂纳多