在我正在构建的网站上,在我减小浏览器的大小后,标题图片和div部分被切断:
我尝试使用Firebug跟踪代码,但我真的无法弄清楚我做错了什么。有什么想法吗?
CSS:
.slide {
padding-top: 125px;
background-attachment: fixed;
width: 100%;
height: 100%;
min-height: 960px;
position: relative;
box-shadow:inset 0px 10px 10px -10px rgba(0,0,0,0.3);
}
div#home, div#contact {
min-height: 480px;
}
div#inner-container {
text-align: left;
width: 960px;
margin: 0 auto;
padding: 0;
white-space: normal;
position: relative;
height: 100%;
}
div#greenPortion {
background-color: #3CA67B;
min-width: 100%;
height: 200px;
bottom: 0;
position: absolute;
}
div#title {
background-image:url(../images/banner.png);
margin: 0 auto;
padding: 0;
min-width: 100%;
height: 200px;
}
HTML:
<div class="slide" id="home" data-slide="1" data-stellar-background-ratio="1">
<div id="inner-container">
<div id="name" clas="row">
<img src="images/names.png">
</div>
</div>
<div id="greenPortion"></div>
</div>
网站:http://andrewgu12.kodingen.com/
任何帮助将不胜感激,谢谢!
答案 0 :(得分:1)
将min-width: 960px
应用于css中的body
:
CSS
body {
...
min-width: 960px;
...
}
答案 1 :(得分:0)
设置宽度(以百分比表示)以使元素调整为窗口大小
div#inner-container {
width: 100%;
}
div#header {
width: 100%;
}
此外,您应该考虑使用媒体查询来调整网站在不同屏幕分辨率下的外观