html样式自动铺满宽度,为CSS和HTML设置不同屏幕尺寸的自动高度和宽度

这个布局我有2个问题：

> .feature_content(灰色背景)使其高度和宽度适应不同的屏幕尺寸.现在,在大屏幕上.feature_content远离页脚.

>无论屏幕大小如何,我都要删除水平滚动条.

我想：将.feature_content调整到剩余高度并删除水平滚动条.

我的代码：

HTML：

Header added just for demonstration purposes

Your content goes here

Footer here

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;

}