Я несколько раз играл с тегами div, пытаясь настроить мой основной макет. Я разработал, как разместить весь контент внутри тегов, но, похоже, не может определить мой макет. Мне нужно, чтобы мой бокбар div расширял ту же высоту, что и мой div div, и чтобы все было сосредоточено. предпочтительно используя% для длин, а не для px, поэтому он подходит для всех экранов разрешения? См. Рисунок. благодарю!
См. Ссылку для изображения моего макета.
Хорошо, пусть начнется с самого начала. Поскольку div является тегом последней инстанции, вы должны использовать другие способы настройки макета (я рекомендую использовать HTML5 с новыми тегами для этого, например, заголовок, nav, section и в сторону).
Но, прежде всего, чтобы в первую очередь сохранить все ваши элементы в центре и одинаковой ширине, вы должны поместить их все в секцию обертки со схожими свойствами:
#wrapper{
margin: 0 auto;
width: 70%
min-width: 720px;
max-width: 1300px;
}
Тогда все ваши композиты заголовков должны были бы установить ширину 100%, а после этого разделите свой контент и панель в сторону, установив для них процентную ширину, равную 60% -40% (если это приведет к тому, что секция для перехода вниз, вы должны подумать о том, чтобы сделать ее одной процентов меньше, и сделать его правильным float).
И чтобы сохранить основную секцию и боковую панель одинаковой высоты, я рекомендую использовать 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);
});
Таким образом, ваши элементы будут динамически устанавливать минимальную высоту в зависимости от высоты более высокого элемента. Таким образом, вам не нужно устанавливать их вручную. Скрипт здесь: http://jsfiddle.net/7TjfF/2/
Я думаю, вам просто нужна часть контента/боковой панели, поэтому здесь можно найти одно из нескольких возможных решений:
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;
}