0
我正在重新設計我們的網站以使其響應。現在我正在頁面的頭部工作，該頁面由3個div框組成。根據屏幕尺寸，它們應該全部「收縮」相同的速率。但最後一個不這樣做。它也不會填充其高度的100％。怎麼來的？我的錯誤是什麼？爲什麼這個響應式網頁設計不起作用？
滑塊中的圖片是隨機的！
HTML
<header class="header2">
<header class="second">
<div class="top_slider">
<div id="slider" class="aslider" data-duration="10" data-hide-controls>
<div class="aslide" data-duration="4" data-audio="assets/audio/Acoustic-Josh-10248_hifi.mp3" data-audio-loop>
<img src="https://lh6.googleusercontent.com/-kKIX7Bbp10U/UwlakWBTzII/AAAAAAAA1iU/FoYSNulL4Oo/s720/IMG_0003.JPG" />
</div>
<div class="aslide" data-duration="5" data-audio="assets/audio/Country_-Adrien_G-8614_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-yRjbRGF3V5Q/UwlauwWKw-I/AAAAAAAA1jE/8EiHF1C5bvc/s720/IMG_0009.JPG" />
</div>
<div class="aslide" data-duration="6" data-audio="assets/audio/Driving_-SpoonZ-9705_hifi.mp3">
<img src="https://lh4.googleusercontent.com/-I0BvWvxsYos/Uwla55SXfeI/AAAAAAAA1j8/nH4M26dUtdw/s720/IMG_0016.JPG" />
</div>
<div class="aslide" data-duration="7" data-audio="assets/audio/I_Wouldn-duh-8326_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-1OPZWOsQxTQ/UwlbHV7w9tI/AAAAAAAA1k0/FHocKwEtNuQ/s720/IMG_0023.JPG" />
</div>
</div>
</div>
<div class="logo">
<img src="http://www.s4ea.org/images/logor.jpg" width="100%" height="auto">
</div>
<div class="right">
<table width="100%" height="100px">
<tr>
<td>
<ul style="float:left;">
<li><a href="http://www.s4ea.org/images/docs&maps/S4EA REGISTRATION FORM-ANNUAL.doc" target="_parent" onMouseOut="MM_swapImgRestore()"><img src="http://www.s4ea.org/images/navigation/athlete_registration.gif" name="register" border="0" id="register" onLoad="" style="padding-bottom:0%;"></a></li>
<li><a href="http://www.s4ea.org/images/docs&maps/S4EA REGISTRATION FORM-ANNUAL.doc" target="_parent"><img src="http://www.s4ea.org/images/navigation/athlete_registration.gif" name="register" border="0" id="register" onLoad="" style="padding-bottom:0%;"></a></li>
</ul>
</td>
<td>
<ul style="float:right;">
<li><a href="http://www.s4ea.org/images/docs&maps/S4EA%20VOLUNTEER%20REGISTRATION%20PACKET.pdf" target="_parent" onMouseOut="MM_swapImgRestore()"><img src="http://www.s4ea.org/images/navigation/volunteer_coach.gif" name="subscribe" border="0" id="subscribe" onLoad="" style="padding-bottom:0%;"></a></li>
<li><a href="form.php" target="_parent" onMouseOut="MM_swapImgRestore()"><img src="http://www.s4ea.org/images/navigation/volunteer_form.gif" name="volunteer_form" border="0" id="volunteer_form" onLoad=""></a></li>
</ul>
</td>
</tr>
</table>
</div>
</ul>
</header>
</header>
CSS
.second .top_slider {
width:40%;
background-color: #FFF;
float:left;
}
.second .top_slider .aslide {
display: none;
}
.second .top_slider .aslide img {
max-width: 100%;
height:auto;
}
.second .top_slider #slider {
width: 100%;
height: 600px;
}
.second .top_slider .aslide .text {
width: 200px;
margin: 0 auto;
color: #f8f8f8;
text-shadow: 0 0 2px #000;
font-weight: bold;
font-size: 36px;
width: 100%;
text-align: center;
position: absolute;
bottom: 30px;
font-family: sans-serif;
}
.second .logo {
width: 26.7%;
background-color: #FFF;
float:left;
padding-left:3.3%;
}
.second .right {
width:26.7%;
background-color: #FFF;
float:left;
padding-left:3.3%;
overflow:hidden;
font-size:1em;
height:200px;
}
.second .right img {
max-width:80%;
margin:0px 0px 0px 0px;
padding-top:5%;
}
.second .right ul li{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul {
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul li img{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
height: 20%;
padding-top:5%;
width:auto;
}
200px不再在碼！ .second .right { height：auto; } – user3546800
哪一個是最後一個？頂部滑塊，標誌或權利？ – dyatesupnorth
我建議你使用[** Twitter Bootstrap **]（http://getbootstrap.com/）讓你的網站響應。 –