выравнивание тега div с боковыми панелями, динамически расширяющимися

Question

Я уже много раз играл с тегами div, пытаясь настроить мой основной макет. Я разработал, как разместить весь контент внутри тегов, но, похоже, не может определить мой макет. Мне нужно, чтобы мой бокбар div расширял ту же высоту, что и мой div div, и чтобы все было сосредоточено. предпочтительно используя% для длин, а не для px, поэтому он подходит для всех экранов разрешения? См. Рисунок. спасибо!

См. Ссылку на изображение моего макета.

Layout Image

Answer 1

Я думаю, вы просто нуждаясь в содержание/боковой панели часть, так вот один из нескольких возможных решений:

Fiddle here

HTML:

<div id="content"> 
    Content stuff here... 

    <div id="sidebar"> 
     Sidebar stuff here... 
    </div> 
</div> 

CSS :

#content { 
    margin: 0 auto; 
    position: relative; 
    width: 400px; /* <- change to suit */ 

    /* v-- just for testing */ 
    background: red; 
    height: 500px; 
} 

#sidebar { 
    float: right; 
    height: 100%; 
    width: 100px; /* <- change to suit */ 

    /* v-- just for testing */ 
    background: green; 
} 

Answer 2

Хорошо, давайте начнем с самого начала. Поскольку DIV является тегом последней инстанции, вы действительно должны использовать другие способы, чтобы создать макет (я рекомендую использовать HTML5 с его новыми тегами, чтобы сделать так, как заголовка, нав, раздел и в стороне) ,

Но добраться до точки, в первую очередь, чтобы сохранить легко все ваши элементы по центру и такой же ширины, вы должны поместить их все в разделе обертки с аналогичными свойствами:

#wrapper{ 
    margin: 0 auto; 
    width: 70% 
    min-width: 720px; 
    max-width: 1300px; 
} 

Тогда все ваши заголовочным композиты должны были установить ширину в 100%, а после этого разделите свой контент и стороннюю полосу, установив их на процентную ширину, равную 60% -40% (если это приведет к тому, что в сторону секции выпрыгнете вниз, вам следует подумать о том, чтобы сделать ее на один процент более тонкой и сделать это правильно поплавок).

И держать основную секцию и боковую панель одинаковую высоту я рекомендую использовать Javascript:

jQuery(document).ready(function(){ 
    $hi1 = jQuery('#content').height(); 
    $hi2 = jQuery('#sidebar').height(); 

    jQuery('#sidebar').css('min-height', $hi1); 
    jQuery('#content').css('min-height', $hi2); 
}); 

Thisd путь ваши элементы будут динамически устанавливать минимальную высоту в зависимости от высоты повыше элемента. Таким образом, вам не нужно устанавливать их вручную. Fiddle here: http://jsfiddle.net/7TjfF/2/