100% высота и ширина, CSS и динамический контент

Question

Я огляделся по сторонам и еще не нашел ПОЛНОСТЬЮ того, что искал, так что, надеюсь, на этот вопрос еще никто не ответил!

В любом случае, рассматриваемый макет можно найти ЗДЕСЬ . Я пытаюсь достичь левого столбца с фиксированной шириной и области содержимого ширины жидкости. По большей части, это работает просто отлично. Однако когда содержимое выходит за пределы высоты или ширины окна браузера, кажется, что разделы расширяются не так, как хотелось бы. Обратите внимание, что серая полоса в верхней части не достигает правого края содержимого страницы, а высота левого столбца также не достигает нижней части содержимого страницы.

Правильно ли я считаю, что это связано с тем, что установка чего-либо на 100% высоты или 100% ширины с помощью CSS является статической? т.е. независимо от того, какая высота / ширина окна браузера была при вызове CSS, сохраняется, и это все?

Если это так, возможно, мне нужно рассмотреть некоторые другие методы установки высоты и ширины моих элементов. Есть идеи? Также обратите внимание, что фиктивный контент на странице пока является изображением. Я хотел вычеркнуть имена и т. Д., Чтобы сохранить конфиденциальность данных.

СПАСИБО ЗА ВСЕ ВАШУ ПОМОЩЬ !!!

Answer 1

Как на счет этого ...

Тем не менее, левый столбец будет доходить только до правого содержимого. Если вы хотите, чтобы он расширялся до высоты области просмотра, когда не хватает контента для заполнения, вам понадобится JavaScript, или вам придется использовать повторяющийся фон, который заполняет html

Демо: http://jsfiddle.net/wdm954/KyUfN/

<div id="wrapper">
    <div id="left">left</div>
    <div id="right">       
        <div id="content">
        <div id="top">top</div>
            content
        </div>
    </div>
</div>

CSS ...

/* clearfix */
#wrapper:after, #right:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
}

#wrapper, #right {
    display: inline-block;
}

#wrapper, #right {
    display: block;
    -height: 1px;
}
/* end clearfix */

#wrapper {
    background-color: #000000;
}

#left {
    float: left;
    width: 300px;
    color: #FFF;
}

#right {
    margin-left: 300px;
}

#top {
    height: 100px;
    background-color: #DEDEDE;
    border-bottom: 1px solid #B8B8B8;
}

#content {
    background-color: #F4EBEB;
    height: 600px;
    width: 1200px;
}

Answer 2

Если основной проблемой является фон, вы можете просто оформить оболочку. Это то, что я в итоге сделал для неуправляемой боковой панели, так как я не хотел прибегать к JS, а другие решения не работали для меня. В моем случае проблема с боковой панелью возникла из-за вкладок jQuery, которые являются частью темы. Когда я переключался на вкладки, боковая панель не расширялась до полной высоты, поэтому фон тоже не мог.

HTML

<div id="wrapper" class="sidebar-right">
    <div id="maincontent">
    #content
    </div>
    <div id="sidebar-right">
    #sidebar content
    </div>
</div>

CSS (это предполагает сетку 960 с боковой панелью 280 пикселей)

#wrapper.sidebar-right{
    background: white url('images/bg.png');
    background-repeat: repeat-y; /*repeats down the length of the page*/
    background-position: 680px 0px; /*moves it into place*/
    }

Если у вас разные боковые панели или макеты полной ширины, измените фоновое изображение / положение и стиль соответственно. Надеюсь, это кому-нибудь поможет.