重叠DIV（和图像）的问题

时间：2014-06-13 21:49:34

标签： html css

我遇到重叠DIV的问题。

这是窗口最大化This is how the webpage appears when the window is maximised

时网页的显示方式

当窗口缩小This is how the webpage appears when the window is shrunk

时，这就是网页的显示方式

This is how the webpage appears when the user scrolls to the right (red arrow) to view the text/image这是当用户向右滚动（红色箭头）以查看文本/图像时网页的显示方式，但问题是内容与侧边栏重叠（蓝色箭头）。

所以我的问题是，如何阻止这种情况发生（或者我该怎么做）？

这是我的HTML / CSS（它不在小提琴中，因为我无法以这种方式证明这个问题）

 <!DOCTYPE html><head>

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>Example Title</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.content {
    width:auto;
    float:left;
    clear: right;
}
#sidebar #menubar li, #sidebar #menubar li:link, #sidebar #menubar li:visited {
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
}
#sidebar #menubar li a, #sidebar #menubar li a:link, #sidebar #menubar li a:visited {
font-family: 'Open Sans', sans-serif;   font-size: 80%;
    color: #FFF;
    text-decoration: none;
}
#logo {
    height: 90px;
    width: 200px;
    margin-top: 0px;
    margin-right: 25px;
    margin-bottom: 25px;
    margin-left: 25px;
}

#sidebar #menubar li:hover {
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
    background-color: #06C;
}
#sidebar #menubar li a:hover {
font-family: 'Open Sans', sans-serif;   font-size: 80%;
    color: #FFF;
    text-decoration: none;
}

#sidebar    #menubar li#active{
font-family: 'Open Sans', sans-serif;   
    color: #FFF;
    text-decoration: none;
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
    background-color: #0066CC;
}

#sidebar #menubar  {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 125%;
    color: #006;
    text-decoration: none;
}html, body {
    height:100%;
    margin: 0px;
    padding: 0px;
    background-color: #FFF;
}

#sidebar {
    width: 250px;
    height: 100%;
    left: 0;
    top: 0;
    float:left;
    background-color: #006;
    padding-top: 25px;
    position: fixed;
    clear: right;
    overflow-y:auto;
    overflow-x:hidden;
    bottom: 0px;
}

#content {
    width: auto;
    float: left;
    margin-left: 250px;
    padding-top: 125px;
    padding-right: 125px;
    padding-bottom: 125px;
    padding-left: 125px;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
}
@media only screen and (max-width: 500px){
 #sidebar{
    position:relative;
    height:auto;
    width:100%;
    float:left;
    clear: right;
    padding-bottom: 25px;
  }
#content {
    position:relative;
    width:auto;
    float:left;
    margin: 0px;
    padding: 25px;
    clear: right;
}

}
</style>
</head>
<body>
<section><div id="sidebar">
<div id="logo"><img src="http://dummyimage.com/200x89/000/fff&text=Logo" width="200" height="89" alt="" /></div>
<ul id="menubar">
      <li ><a href="#">Link 1</a></li>
       <li ><a href="#">Link 2</a></li>
      <li ><a href="#">Link 3</a></li>
      <li ><a href="#">Link 4</a></li>
      <li ><a href="#">Link 5</a></li>

    </ul> 
    </div></section>
<div id="content">
<div class="content">
<h1>Example H1</h1>
   <p>Duis aliquam mauris ac felis tincidunt varius. Maecenas pharetra id risus sed adipiscing. Vestibulum non libero eu quam semper commodo. Aliquam et diam ac tortor molestie blandit. Nullam et sem elit. Aenean tincidunt vitae lacus luctus fringilla. Cras mattis placerat semper. Etiam ullamcorper nunc vel mauris suscipit feugiat. In ac sollicitudin tellus, quis condimentum velit. Sed aliquam, leo non luctus dignissim, sapien felis ultrices sapien, vitae sollicitudin tortor sapien viverra diam. Nam varius nulla sapien, in pharetra sem placerat pretium. Ut varius vehicula nisl vel scelerisque. In hac habitasse platea dictumst. Sed iaculis, risus condimentum accumsan sagittis, mauris sem accumsan lectus, interdum porta metus leo sit amet tortor. 
</p>
   <div class="content-image"><img src="http://dummyimage.com/650x400/000/fff&text=Large+Image" alt="" width="650" height="400" border="0" align="middle" /></div>
 </div>
</div>
<div style='clear:both;'></div>
</body>
</html>

编辑：侧栏有一个位置：固定的原因是因为如果它不是这样的话会发生：

Edit

2 个答案:

答案 0 :(得分：1)

这是因为侧边栏是固定的。要实现您想要的效果，请尝试将侧边栏和内容浮动到左侧。

以下是一个简单示例：Fiddle 

#sidebar
{
    float:left;
    background-color:#56B7BF;
    width:150px;
    height:400px;
}
#content
{
    float:left;
    background-color:#BF5E56;
    width:400px;
    height:400px;
}

答案 1 :(得分：0)

侧栏需要有绝对位置，请阅读： https://developer.mozilla.org/en-US/docs/Web/CSS/position 

  <!DOCTYPE html><head>

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>Example Title</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.content {
    width:auto;
    float:left;
    clear: right;
}
#sidebar #menubar li, #sidebar #menubar li:link, #sidebar #menubar li:visited {
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
}
#sidebar #menubar li a, #sidebar #menubar li a:link, #sidebar #menubar li a:visited {
font-family: 'Open Sans', sans-serif;   font-size: 80%;
    color: #FFF;
    text-decoration: none;
}
#logo {
    height: 90px;
    width: 200px;
    margin-top: 0px;
    margin-right: 25px;
    margin-bottom: 25px;
    margin-left: 25px;
}

#sidebar #menubar li:hover {
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
    background-color: #06C;
}
#sidebar #menubar li a:hover {
font-family: 'Open Sans', sans-serif;   font-size: 80%;
    color: #FFF;
    text-decoration: none;
}

#sidebar    #menubar li#active{
font-family: 'Open Sans', sans-serif;   
    color: #FFF;
    text-decoration: none;
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
    background-color: #0066CC;
}

#sidebar #menubar  {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 125%;
    color: #006;
    text-decoration: none;
}html, body {
    height:100%;
    margin: 0px;
    padding: 0px;
    background-color: #FFF;
}

#sidebar {
    width: 250px;
    height: 100%;
    left: 0;
    top: 0;
    float:left;
    background-color: #006;
    padding-top: 25px;
    position: absolute;
    clear: right;
    overflow-y:auto;
    overflow-x:hidden;
    bottom: 0px;
}

#content {
    width: auto;
    min-width: 700px;
    float: left;
    margin-left: 250px;
    padding-top: 125px;
    padding-right: 125px;
    padding-bottom: 125px;
    padding-left: 125px;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
}
@media only screen and (max-width: 500px){
 #sidebar{
    position:relative;
    height:auto;
    width:100%;
    float:left;
    clear: right;
    padding-bottom: 25px;
  }
#content {
    position:relative;
    width:auto;
    float:left;
    margin: 0px;
    padding: 25px;
    clear: right;
}
.content img {
    display: none;
}
}
</style>
</head>
<body>
<section><div id="sidebar">
<div id="logo"><img src="http://dummyimage.com/200x89/000/fff&text=Logo" width="200" height="89" alt="" /></div>
<ul id="menubar">
      <li ><a href="#">Link 1</a></li>
       <li ><a href="#">Link 2</a></li>
      <li ><a href="#">Link 3</a></li>
      <li ><a href="#">Link 4</a></li>
      <li ><a href="#">Link 5</a></li>

    </ul> 
    </div></section>
<div id="content">
<div class="content">
<h1>Example H1</h1>
   <p>Duis aliquam mauris ac felis tincidunt varius. Maecenas pharetra id risus sed adipiscing. Vestibulum non libero eu quam semper commodo. Aliquam et diam ac tortor molestie blandit. Nullam et sem elit. Aenean tincidunt vitae lacus luctus fringilla. Cras mattis placerat semper. Etiam ullamcorper nunc vel mauris suscipit feugiat. In ac sollicitudin tellus, quis condimentum velit. Sed aliquam, leo non luctus dignissim, sapien felis ultrices sapien, vitae sollicitudin tortor sapien viverra diam. Nam varius nulla sapien, in pharetra sem placerat pretium. Ut varius vehicula nisl vel scelerisque. In hac habitasse platea dictumst. Sed iaculis, risus condimentum accumsan sagittis, mauris sem accumsan lectus, interdum porta metus leo sit amet tortor. 
</p>
   <div class="content-image"><img src="http://dummyimage.com/650x400/000/fff&text=Large+Image" alt="" width="650" height="400" border="0" align="middle" /></div>
 </div>
</div>
<div style='clear:both;'></div>
</body>

相关问题
最新问题