为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

这就是你想要的？演示.尝试缩小浏览器的窗口,您将看到元素将被订购.

我用过什么？灵活的盒子模型或Flexbox.

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

flex-init-setup和flex-ppal-setup.

哪里:

1. flex-init-setup表示flexbox init设置 ; 和
2. flex-ppal-setup表示flexbox主要设置

以下是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;
 }

好,莱昂纳多