HTML/CSS固定定位造成重疊的div

我正在嘗試用固定位置和內容的居中容器創建2個側面橫幅（左側和右側）。HTML/CSS固定定位造成重疊的div

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

來源

2013-12-09 Brute Force

請創建一個小提琴。 – andi

我在提問的底部添加了小提琴。 –

看了你的小提琴後，我強烈建議你在自己的文件中製作你的css。內聯樣式不是特別適用於響應式網站的方式。 –

你需要用三倍的DIV在包裝DIV並設置min-width防止重疊。這可以防止它比三列變窄。加上寬度，將其設置爲最小值。

來源

2013-12-09 18:53:07

@ BruteForce你也可以使用javascript的'if'語句來添加它，這取決於它們在哪個頁面上。（如果都不需要這種風格） –

@Diodeus我試過這個建議，但它沒有解決問題。正確的div仍然覆蓋中心包裝。滾動條正在出現，但並未阻止正確的欄問題。 –

@Josh你可以澄清我怎麼能使用javascript –

您所在的問題是因爲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;">

舊回答

的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，是去除右側時，屏幕尺寸很小。

來源

2013-12-09 19:39:31

你做了什麼很棒。如您所說，右側橫幅難以控制。如果您能解決問題或提出任何建議，我將非常感激。 –

看看更新的答案，這是你可以做的一個選擇。 –

好的建議。我正在移動設備上測試它，顯示重疊問題的是什麼。 –

這是一個純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>

來源

2013-12-09 20:32:45

HTML/CSS固定定位造成重疊的div

回答

相關問題