Установите автоматическую высоту и ширину в CSS / HTML для разных размеров экрана

я имею2 вопроса с этим макетом :(

.feature_contentсерый фонАдаптируй этоs высота и ширина для разных размеров экрана. Прямо сейчас на больших экранах.feature_content далеко от нижнего колонтитула.Есть горизонтальная полоса прокрутки, которую я хочу удалить независимо от размера экрана.

Я бы хотел : адаптироваться.feature_content на оставшуюся высоту и удалите горизонтальную полосу прокрутки.

ВотFIDDLE

И мой код:

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;
}

Ответы на вопрос(3)

Ваш ответ на вопрос