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

Я огляделся по сторонам и пока не нашел QUITE того, что искал, так что, надеюсь, на этот вопрос еще не ответили где-то еще!

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

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

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

СПАСИБО ЗА ВСЮ ТВОЮ ПОМОЩЬ!!!

Источник

2 ответа

Решение

Как насчет чего-то вроде этого...

Левый столбец будет идти только до правого содержания. Если вы хотите, чтобы он расширялся до высоты области просмотра, когда не хватает контента для заполнения, вам понадобится 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;
}
Источник

Если основной проблемой является фон, вы можете просто оформить оболочку. Это то, что я в итоге сделал для неуправляемой боковой панели, так как я не хотел прибегать к 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*/
    }

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

Источник
Другие вопросы по тегам