HTML/CSS Фиксированное позиционирование, вызывающее перекрывающиеся divs

Я пытаюсь создать 2 боковых баннера (слева и справа) с фиксированным позиционированием и центрированный контейнер для содержимого.HTML/CSS Фиксированное позиционирование, вызывающее перекрывающиеся divs

enter image description here

Проблема заключается в том, что при минимизации экрана, 2 боковые баннеры покрывают центрированный контейнер. Мне нужно решение CSS, чтобы установить минимальную ширину представления на 860px; после чего окно становится прокручиваемым, а divs не перекрываются. Идеальное решение:

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 в собственном файле. Встроенные стили - это не тот способ, который особенно подходит для быстрого реагирования на веб-сайт. –

Вы должны обернуть три DIVs в оберточную 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;">

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, чтобы удалить правую сторону, когда Размер экрана - маленький.

источник

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 Фиксированное позиционирование, вызывающее перекрывающиеся divs

ответ

Смежные вопросы