Question

我试图制作一个菜单，但它工作得很好，当我使窗口变小并滚动时，背景不会延伸。例如：

Full screen view enter image description here

第一张图片是全屏，第二张图片是在我滚动页面后。如您所见，背景不会延伸。下面是我的CSS：

body{
padding: 0px;
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
background-color: #717070;
 }
.header{
background-image: url("img/bgsmall.png");
height: 100px;
background-repeat: repeat-x;
min-width: 1000px;

}
.logo{
margin-left:320px;
float:left;
 }
#menu{
position: relative;
height: 100px;
text-align: center;
width:auto;
margin-left:600px;
min-width:1000px;
}
#menu ul{
list-style: none;
padding: 0;
margin: 0;
position:relative;
}
#menu li{
float: left;
display: inline;
padding-top:35px;
position:relative;
text-transform:uppercase;
}

#menu li a{
text-decoration: none;
padding-left: 32px;
padding-right: 32px;
font-size: 15px;
font-family: arial;
color: #ffffff;
text-align:center;
}
#menu li a:visited{
color: #ffffff;
}
#menu li a:hover{
color: #D86C00;
}

HTML CODE

  <html>
  <head>

  <link href="stylesheet.css" rel="stylesheet" type="text/css" />
  </head>
 <body>
  <div class="header">

<div id="menu">
    <ul>
        <li><a href="#">page1</a></li>
        <li><a href="#">page2</a></li>
        <li><a href="#">page3</a></li>
        <li><a href="#">page4</a></li>
    </ul>
    </div></div>





 </body>
 </html>

提前致谢。

Answer 1

将position:absolute;添加到.header课程。

Answer 2

这是你的最小宽度：1000px;在引起这个问题的#menu上。在不知道你想要实现什么样的布局的情况下，很难说你应该做些什么来取代它，但是把它排除在外就是那个特定的问题

Answer 3

你可以通过两种方式解决这个问题：

1 -

body{
padding: 0px;
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
background-image: url("img/bgsmall.png");
background-repeat: repeat-x;
background-color: #717070;
 }
.header{
height: 100px;
}

2 -

删除“min-width：1000px;”来自标题样式

滚动后，HTML背景重复被切断

3 个答案: