Как автоматически развернуть абсолютные позиции DIVs

Question

У меня есть макет, состоящий из заголовка ширины 100%, двух разделов содержимого содержимого (30-70%) и нижнего колонтитула шириной 70% (видимый только в нижней части правого div).

Моего HTML разметка, как:

<section id="mySection" > 
    <header id="headerTop"> 
    </header> 
    <div id="wrapperLeft"> 
    </div> 
    <div id="wrapperRight"> 
    </div> 
    <footer id="footerRight"> 
    </footer> 
</section> 

Мой CSS является

#mySection 
{ 
    margin:0 auto; 
    padding:0; 
    text-align:center; 
    vertical-align:middle; 
    overflow:hidden; 
} 

#headerTop 
{ 
    position:absolute; 
    top:0; 
    left:0; 
    height:40px; 
    width:100%; 
    overflow:hidden; 
} 

#wrapperLeft 
{ 
    position:absolute; 
    top:40px; 
    left:0; 
    width:30%; 
    bottom:0; 
    overflow:auto; 
} 

#wrapperRight 
{ 
    position:absolute; 
    top:40px; 
    left:30%; 
    width:70% 
    bottom:30px; 
    overflow:auto; 
} 

#footerRight 
{ 
    position:absolute; 
    left:30%; 
    bottom:0; 
    width:70%; 
    overflow:hidden; 
} 

Я хотел бы знать, если я могу спроектировать это лучше, что если я скрыть левый или правый DIV, другой div отображается со 100%. Я думаю, что могу динамически изменять CSS с помощью javascript и корректировать значения слева и ширины для другого div, но он становится беспорядочным и хотел бы избежать его, если это возможно.

Идеально хотелось бы вызвать шоу или скрыть на div, а другой div автоматически настроится на 100% ширину.

У меня нет контроля над уровнем содержимого в div, и вы хотите, чтобы браузер отображал полосу прокрутки, когда высота содержимого превышает окно.

Заранее за вашу помощь.

Answer 1

Я бы добавил обертку в divs, чтобы вы могли плавать тогда вместо позиционирования, а затем абсолютно. Таким образом, вы можете сделать хотя бы один div 100% в ширину. Например, правый div. Если вы хотите, чтобы оба divs были динамическими по размеру, вам нужно будет использовать jquery. Например, добавление классов, если вы хотите, чтобы jquery был минимальным.

пример HTML:

<div id="header"></div> 
    <div id="main"> 
    <div id="left"></div> 
    <div id="right"></div> 
    </div> 
    <div id="footer"></div> 

Пример CSS:

#main{ 
    position:relative; 
    overflo:hidden // This will make the container grow with the children 
    width:960px; 
    } 

    #left{ 
    width:200px; 
    float:left; 
    height:100%; 
    } 

    #right{ 
    float:left; 
    width:100%; 
    height:100%; 
    } 

Пример CSS с дополнительной classto коленчатых дивами

#main.only-left #left{ 
    width:100%; 
    } 
#main.only-left #right{display:none;} 

Answer 2

Я думаю, что я знаю, о чем ты говоришь. Я создал здесь небольшой пример. В основном установлено 30% на боковой панели и display: block; на главной колонке. Нажмите на тело в любом месте, чтобы переключить боковой столбец, чтобы показать, как адаптируется главный столбец ... это происходит в правильном направлении?

Codepen sketch

HTML

<div class='wrapper'> 
    <header>Header</header> 
    <section> 
    <aside>Sidebar</aside> 
    <article>Main article</article> 
    </section> 
    <footer>Footer</footer> 
</div> 

CSS

body { 
    margin: 0; 
    padding: 0; 
} 

section { 
    overflow: hidden; 
    position: relative; 
} 

header { 
    background: crimson; 
    height: 100px; 
    width: 100%; 
} 

aside { 
    background: #efefef; 
    float: left; 
    height: 300px; 
    width: 30%; 
} 

aside.hide { display: none; } /** For demo purposes **/ 

article { 
    background: #ccc; 
    display: block; 
    height: 300px; 
} 

footer { 
    background: crimson; 
    float: right; 
    height: 100px; 
    width: 70%; 
} 

JQuery (только для hideToggle пример)

$('html').on('click', function(){ 
    $('aside').toggleClass('hide'); 
}); 

---

UPDATE: Вот пример с небольшим assitance из JQuery для класса переключени. Вероятнее всего, можно обобщить ...http://codepen.io/kunalbhat/pen/kuAcg