Question

我需要建立一个小型网站，而页面大小调整存在问题。我希望我放置为页眉的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内部，但我不知道在哪里。我还尝试将position:relative;替换为display:block;，但给了我同样的问题。

在使用智能手机或其他方式更改显示器分辨率，缩放时，如何做才能完全调整整个页面的大小？使用内容，它会以正确的方式调整大小。

Answer 1

您可以使用20vw强制将标头设置为高度：

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;确保背景图片始终充满容器

Div消失，消除了高度限制

1 个答案: