Question

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

问题出现在底部的2个div中 - 我需要一个灰色栏，屏幕的宽度可以容纳3＆＃39; box.jpeg＆＃39;文件和下面的页面的其余部分是白色的。如果您调整浏览器大小，则会看到灰色条的高度变得太小。我希望在不使用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;
}

响应的Div高度，可以拉伸浏览器的宽度

1 个答案: