Question

我正在尝试使用固定定位创建2个横幅（左侧和右侧），并为内容创建一个居中的容器。

enter image description here

问题在于，当最小化屏幕时，2个横幅覆盖中心容器。我需要一个CSS解决方案来将视图的最小宽度设置为860px;之后，窗口变为可滚动且div不重叠。完美的解决方案是：

enter image description here

我正在使用的HTML是这样的：

<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>

<div class="center" style="margin:100px 180px 0 180px;">
        <div style="width:100%;">
                        <div style="width:500px; margin:0 auto;">
                        </div>
            </div>
</div>

<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>

以上代码可防止左侧栏与中心容器重叠;但问题仍然存在于正确的栏中。

这是代码的缩写：preview

Answer 1

您需要将三个DIV包装在包装DIV中并设置min-width以防止重叠。这可以防止它变得比三列更窄。添加宽度，将其设置为最小值。

Answer 2

您遇到的问题是position: fixed;，因为该对象已从工作流中取出，其他对象无法将其推开。我能够获得一个漂亮且完全响应的布局。（让我知道它是怎么回事）

固定定位元素将从正常流中移除。该   文档和其他元素的行为类似于固定定位元素   不存在。

固定定位元素可以与其他元素重叠。

更新了更符合其需求的答案（JSFIDDLE, remove the show, in the url, to see code）

好的，我在这里做的是使用css media queries来改变布局。

这是html，

<div class="wrap">
    <nav></nav>
    <div class="content"></div>
    <section class="lSide"></section>
    <section class="rSide"></section>
</div>

现在是媒体查询，

@media only screen and (max-width: 680px) {
  .content {
    width: 90%;
        margin-bottom: 10px;
  }
  .lSide, .rSide {
      position: relative;
      width: 90%;
      height: 100px;
      margin: 10px auto;
      bottom: 0;
  }
}

不要忘记将此内容添加到head文件中的html

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">

OLD回答

CSS，（JSFIDDLE, remove the show to see code）

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: tan;
}

.wrap.active {
    min-width: 750px;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: brown;
    z-index: 101;
}

.lSide {
    background: #3b3b3b;
    position: fixed;
    left: 0;
    top: 20%;
    width: 200px;
    height: 80%;
}

.content {
    width: 300px;
    height: 600px;
    background: #c1c1c1;
    margin: 0 auto;
    position: relative;
    z-index: 100;
    top: 20%;
}

.rSide {
    background: #3b3b3b;
    position: fixed;
    right: 0;
    top: 20%;
    width: 200px;
    height: 80%;
}

.rSide.active {
    display: none;
}

JS，（更新）

$(window).resize(function() {
    if ($(window).width() < '750') {
        $('.wrap, .rSide').addClass('active');
    }
    else {
        $('.wrap, .rSide').removeClass('active');  
    }
});

我有一个解决方案，比如css旁边的小提琴，就是在屏幕尺寸较小时移除右侧。

Answer 3

这是一个纯HTML / CSS解决方案，告诉我它是不是你需要的。

<html>
<head>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/

background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

.innertube{

margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;


height : 700px;
}


.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>


</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->

<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>


</div>
</body>
</html>

HTML / CSS固定定位导致重叠的div

3 个答案: