我需要建立一个小型网站,但在调整页面大小方面遇到了问题。 我希望我作为标题放置的 png 图像可以随整个页面调整大小(放大或缩小)。 我用这个CSS
div#container {
overflow: hidden;
min-width:900px;
width:50%;
margin:0px auto;
background-color:#ffffff;
}
div#header {
background: url('header.png') no-repeat center center;
height:20%;
min-width:900px;
width:inherit;
margin:0px auto;
position:relative;
}
div#upper_nav {
position: absolute;
bottom:0%;
right:0%;
text-align:center;
z-index:9999;
background-color:#e6e6e6;
}
这里是html部分
<div id="upper_nav">
<ul id="menu_header">
<li class="active"><a href="../test2/">Home</a></li>
<li><a href="#">Link11</a></li>
<li><a href="#">Link22</a></li>
<li><a href="#">Link33</a></li>
<li><a href="#">Link44</a></li>
</ul>
</div>
这里是测试代码的链接:https://jsfiddle.net/809ofmvr/1/我不知道如何在测试中添加图像。假设在上部有页眉图像,在底部有页脚。
我使用标题,div
header
和 upper_nav
div 中的一些链接。我认为问题出在 header
div 中,但我不知道在哪里。我还尝试用 display:block;
替换 position:relative;
但给了我同样的问题。
当更改显示器分辨率、缩放、使用智能手机或其他任何方式时,我该怎么做才能完全调整整个页面的大小?对于内容,它以正确的方式调整大小。
最佳答案
您可以使用 20vw 强制 header 具有高度:
html {
margin:0;
padding:0;
background-color:#ffffff;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color:#000;
text-align:justify;
background-image: url('http://placehold.it/800x200');
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
div#container {
overflow: hidden;
min-width:900px;
/*max-width:2000px;*/
width:50%;
margin:0px auto;
background-color:#ffffff;
}
div#header {
background: url('http://placehold.it/800x200') no-repeat center center;
background-size: cover;
height:20vw;
min-width:900px;
width:inherit;
margin:0px auto;
position:relative;
}
div#upper_nav {
position: absolute;
bottom:0%;
right:0%;
text-align:center;
z-index:9999;
background-color:#e6e6e6;
}
div#navigation_left {
padding:5px 5px;
float: left;
width:22%;
background-color:#e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px; margin-bottom: -99999px;
}
div#content {
overflow:auto;
margin-left:25%;
background-color:#e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px; margin-bottom: -99999px;
}
div#footer {
clear:both;
background: url('footer.png') no-repeat center center;
height:105px;
position:relative;
}
div#footer_content {
position: relative;
bottom:-50%;
text-align:center;
z-index:9999;
background-color:#fff;
}
P {
font-size: 17px;
color:#000;
font-family:Tahoma;
}
a {
text-decoration: none;
color:#0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,h3,h4,h5,h6,h7,h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_left{
font-size: 11px;
list-style: none;
}
ul#menu_left li {
display: block;
width: 150px;
height: 30px;
margin: 2px;
}
ul#menu_left li a {
color:#000;
display: block;
line-height: 30px;
text-decoration: none;
text-align: left;
}
ul#menu_left li.active, ul#menu_left li:hover {
background-color: #c9c9c9;
}
ul#menu_header {
font-size: 11px;
margin: 0;
padding: 0;
list-style: none;
}
ul#menu_header li {
background-color: #737373;
display: block;
width: 150px;
height: 30px;
margin: 2px;
float: left; /* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
display: block;
line-height: 30px;
text-decoration: none;
width: 150px;
height: 30px;
text-align: center;
}
ul#menu_header li.active, ul#menu_header li:hover {
background-color: #b1b1b1;
}
<div id="container">
<div id="header">
<div id="upper_nav">
<ul id="menu_header">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link11</a></li>
<li><a href="#">Link22</a></li>
<li><a href="#">Link33</a></li>
<li><a href="#">Link44</a></li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">
<a hfre="#">links</a>
</ul>
</div>
<div id="content"><p>text</p></div>
<div id="footer"><div id="footer_content">text</div></div>
</div>
此外,我添加了 background-size: cover;确保背景图像始终填满容器
关于html - Div 消失,移除高度限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55685899/