Question

我是HTML / CSS的新手，我目前正在开展一个项目，我有一个垂直菜单。当我尝试调整我的全尺寸背景图像时，它会扩展屏幕的宽度，所以我需要滚动它。我需要覆盖页面上剩余的空白区域，但不会发生这种情况。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Ryan Gross: Web Dev. </title>
        <style type="text/css">
            .container {
            }
            body {
                margin:0;
                padding:0;
                font-family:"Verdana";
                overflow:auto;
            }
            #menu_background {
                float:left;
                background-color:#272727;
                width:200px;
                height:100%;
                position:fixed;
            }
            #side_menu {
                list-style-type:none;
                font-size:1.3em;
                width:200px;
                padding:0px;
                margin-top:260px;
                font-family:"Verdana";
                text-align:center;
            }
            #side_menu li a {
                display:block;
                text-decoration:none;
                color:#E6E6E6;
                padding:8px 0px 8px 0px;
            }
            #side_menu li a:hover {
                background-color:#585858;
            }
            #contact_info {
                float:left;
                margin:120px 0px 0px 20px;
                padding:0;
                color:#E6E6E6;
                list-style-type:none;
                font-size:.9em;
            }
            #contact_info li {
                padding:2px 0px 2px 0px;
            }
            #image {
                float:left;
                width:100%;
                height:100%;
                background-size:cover;
                background-image:url("example.jpg");
            }
        </style>
    </head>
    <body>  
    <div class="container">
        <div id="menu_background"> 
            <ul id="side_menu">
                <li> <a href="about.html">  About </a></li>
                <li> <a href="skills.html">  Skills </a> </li>
                <li> <a href="projects.html">  Projects </a> </li>
                <li> <a href="resume.html"> Resume </a> </li>
            </ul>
        </div>
        <div id="image"></div>
    </div>
    </body>
</html>

Answer 1

您可以将#image高度设置为height:100vh，这意味着您希望它伸展到视口高度的100％。您可以找到更多信息here。

这是新代码：

body {
  margin: 0;
  padding: 0;
  overflow: auto;
  font-family: Verdana
}

#side_menu {
  padding: 0;
  list-style-type: none
}

#menu_background {
  float: left;
  background-color: #272727;
  width: 200px;
  height: 100%;
  position: fixed
}

#side_menu {
  font-size: 1.3em;
  width: 200px;
  margin-top: 260px;
  text-align: center;
}

#side_menu li a {
  display: block;
  text-decoration: none;
  color: #E6E6E6;
  padding: 8px 0;
}

#side_menu li a:hover {
  background-color: #585858
}

#image {
  float: left;
  width: 100%;
  height: 100vh;
  background: url(http://lorempixel.com/1500/1500) no-repeat center center;
  background-size:cover;
}

<div class="container">


  <div id="menu_background">

    <ul id="side_menu">
      <li><a href="about.html">About</a></li>
      <li><a href="skills.html">Skills</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="resume.html">Resume</a></li>
    </ul>

  </div>

  <div id="image"></div>

</div>

Answer 2

＆＃13;

.container{
  width: 400px;
  height: 300px;
  overflow: auto;
}
#image{
background: url('http://www.natureasia.com/common/img/splash/thailand.jpg');
}

＆＃13;

<div class="container">  
  <div id="image"></div>
</div>

＆＃13;

Answer 3

要使页面快速响应并解决问题，您可以将导航宽度设置为20％，将图像宽度设置为80％。这将使两者相互浮动。唯一的技巧是，如果使用较小的屏幕，则需要设置断点。这是新代码。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>  
    <div class="container">
        <div id="menu_background"> 
            <ul id="side_menu">
                <li> <a href="about.html">  About </a></li>
                <li> <a href="skills.html">  Skills </a> </li>
                <li> <a href="projects.html">  Projects </a> </li>
                <li> <a href="resume.html"> Resume </a> </li>
            </ul>
        </div>
        <div id="image"> 
        </div>
    </div>
</body>
</html>

body {
margin:0;
padding:0;
font-family:"Verdana";
overflow:auto;
}

#menu_background {
float:left;
background-color:#272727;
width:20%;
height:100%;
position:fixed;
}

#side_menu {
list-style-type:none;
font-size:1.3em;
width:200px;
padding:0px;
margin-top:260px;
font-family:"Verdana";
text-align:center;
}


#side_menu li a {
display:block;
text-decoration:none;
color:#E6E6E6;
padding:8px 0px 8px 0px;

}

#side_menu li a:hover {
background-color:#585858;
}


#contact_info {
float:left;
margin:120px 0px 0px 20px;
padding:0;
color:#E6E6E6;
list-style-type:none;
font-size:.9em;
}

#contact_info li {
padding:2px 0px 2px 0px;
}

#image {
float:right;
width:80%;
height:100%;
background-size:cover;
background-image:url("example.jpg");
}

配件＆amp;调整屏幕部分内的照片大小

3 个答案: