响应式Div高度可以扩展浏览器的宽度

Question

我需要设置一个响应式div高度 - 我想我几乎都在那里，但是当我调整浏览器的大小时会发生一些失真。这里是一个小提琴文件，所以你可以看看：https://jsfiddle.net/td5n8ky9/10/

问题是在底部2 divs - 我需要一个灰色的酒吧屏幕的宽度来容纳3'box.jpeg'文件和其余的下面的页面是白色的。如果您调整浏览器大小，您会看到灰色条的高度变得太小。我希望能够在不使用Jquery的情况下解决这个问题（尽管我会如果必须的话），并且不需要添加额外的媒体查询，因为我希望在调整浏览器大小时能够相对平滑地进行转换。谢谢你的时间。

源代码

<div class="container"> 

     <nav> 
      <ul id="mobile_active"> 
       <li class="link"><a href="#">About Us</a></li> 
       <li class="link"><a href="#">Creative</a></li> 

       <li id="logo"><a href="#"><img src="links/Logo.png"/></a></li> 

       <li class="link"><a href="#">Portfolio</a></li> 
       <li class="link"><a href="#">Contact Us</a></li> 
      </ul> 
     </nav> 

     <header><a class="mobile_menu"></a></header> 

</div> 

<div class="line"></div> 

<div class="container">    
    <div id="G"> 
     <img src="links/06-Grafiks-G.png"/> 

    <div id="Text-Scroller"> 
     <h1>headline</h1> 
     <p>Body Text</p> 
    </div> 
</div> 
</div> 

<div id="Gray"></div> 

<div class="container"> 
    <article class="newsfeed"><img src="links/box1.jpg"/></article> 
    <article class="newsfeed"><img src="links/box2.jpg"/></article> 
    <article class="newsfeed"><img src="links/box3.jpg"/></article> 
</div> 

<div class="container"> 
     <div class="contact"><p>Address<br>Location</p></div> 
     <div class="contact"><p>Phone • Fax<br>Email</p></div> 
     <div class="contact"><p>Hours<br>Closed</p></div> 
    </div> 

</div> 

CSS

.container {max-width: 950px; margin: 0 auto; position: relative;} 

.line {clear:both; border-bottom: medium solid #bbb1a6; overflow:visible;} 

.contact{width:27.75%; padding-left:2.75%; background-color:#FFF; height: 73%; padding-right:2.75%; float:left;} 
.contact p {font-size:0.85em; text-align:center;} 

#G{position:relative; clear:both; margin:0; height:auto; padding:0; line-height:0;} 
#G img {width:95%; padding-bottom:0; padding-left:2.5%; padding-right:2.5%;} 

#Text-Scroller{width:66%; padding-top:33%;margin:0 auto; z-index:2; top:0; right:0; left:0; 
text-align:center; position:absolute; line-height:1.35em;} 

h1{font-size:1.45em; font-weight:bold; text-decoration:none;color:#A54499;} 
p{font-size:1em} 

nav ul {list-style: none; padding: 0; text-align: center;} 
nav li {display: inline-block; vertical-align: bottom;} 

nav li a { 
    color: #949c50; 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 1em; 
    line-height: 1.25em; 
    text-align: center; 
    text-decoration: none; 
    padding-right: 2.5em; 
    padding-left: 2.5em; 
    margin: 0;} 

nav li a:hover {color:#a54499;} 
a.mobile_menu {display:none;} 

li#logo {top:0; left:50%; margin-top:-16px;} 

#Gray{width:100%; height:27%; background-color:#bbb1a6; position:absolute;} 

.newsfeed img{width:30%; padding: 1.5%; float:right; height:auto;} 


@media (max-width: 950px) { 

.container {width: 100%;} 

#Text-Scroller{line-height:1em;} 

.line {clear:both; border-bottom: medium solid #bbb1a6; overflow:visible; margin-top: 125px;} 

h1{font-size:1.1em; font-weight:bold; color:#A54499;} 
p{font-size:0.85em} 

nav {position: relative; top: 113px;} 
nav ul {padding-top:50px;} 

li#logo { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-top: -50px; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);} 
} 

@media (max-width: 750px) {h1{font-size:0.9em;} p{font-size:0.75em}} 

@media (max-width: 600px) { 
.container {width: 100%; height:auto;} 
.line {display:none;} 
.newsfeed img{width:100%; padding-left:0; padding-right:0;} 
.contact{width:100%; padding:0;} 

h1{font-size:1.45em; font-weight:bold; text-decoration:none;color:#A54499;} 
p{font-size:1em} 

header {height:35px;top:185px; display:block;} 
#Gray{display:none;} 
#Text-Scroller{width:95%; padding-top:2.5%;margin:0 auto; z-index:0; top:0; 
right:0; left:0; text-align:center; position:relative; line-height:1.25em;} 

#G {height:auto; margin-top:102px; padding:0; clear:both;} 
#G img {display:none;} 

nav {position: relative; top: 113px;} 
nav li a {width:100%; padding:0;} 
nav ul li {width:100%; padding:0;} 

nav ul li a {color: #949c50; font-size:1em; text-align:center; 
border-bottom: 1px solid #bbb1a6; display:block; padding:3%; width:94%; } 

nav ul li#logo a {border-bottom: none; } 
nav li:first-child {padding-top:40px; } 

nav ul li a:hover { color: #FFF;background-color:#949c50;} 
nav ul li#logo a:hover {background-color:transparent;} 

a.mobile_menu { 
display:block; 
width:100%; height:38px; 
background:#a54499 
url(../links/mobile_link_menu.png)no-repeat 4px 4px; 
position:absolute; 
top:165px; 
cursor:pointer;} 

a.mobile_menu.selected {background-position: 4px -26px; } 

li#logo { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-top: -50px; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);}} 

Answer 1

使用填充底百分比和高度：0

#Gray { 
    width: 100%; 
    height: 0; 
    padding-bottom: 31%; 
    background-color: #bbb1a6; 
    position: absolute; 
}