выравнивание тега div с динамическим расширением боковых панелей

Question

выравнивание тега div с динамическим расширением боковых панелей

0

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

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

Изображение макета

Mark.S 20 фев. 2014, в 02:55

Источник

0

Можете ли вы опубликовать свой код на jsfiddle? Покажите нам, что вы пытались.
aloisdg 20 фев. 2014, в 03:17

Теги:

html

css

2 ответа

Ещё вопросы

Можете ли вы опубликовать свой код на jsfiddle? Покажите нам, что вы пытались.

Nidrax · Answer 1 · 2014-02-20T05-27-00.000Z

Хорошо, пусть начнется с самого начала. Поскольку 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/

Проверено. не похоже на работу. Я что-то слышал об установке JQuery. это верно?
Вы должны добавить следующий код в голову использовать JQuery библиотеку: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Skrivener · Answer 2 · 2014-02-20T04-02-00.000Z

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

Скриншот здесь

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;
}