3 или 2 столбца макет зависит от фактического содержания

Question

Я должен построить почти стандартную 3 колонки

-----header-----
-s1-content-s2--
-----footer-----

Где боковые панели 1 и 2 имеет width:25% и содержание коробки имеет 50%. И это работает отлично.

Но разница в боковой панели1. На некоторых страницах нет абсолютно никакого контента. Я установил CSS для SideBar1 в max-width:25%; и когда контент не появляется, div имеет 0px x 0px. Так почти сделано.

Окончательный эффект - растянуть содержимое div на 75%, когда sidebar1 пуст.

Возможно ли сделать это без уродливых хаков CSS или использования JS? Я проверил много решений, и большинство из них не работают правильно.

Answer 1

Это обрабатывает необязательный контент слева или справа.

jsFiddle

HTML

<header></header>

<div id="wrapper">
    <div id="left-sidebar">
        Optional Content
    </div>

    <div id="content">
        <p>To sailors, oaths are household words; they will swear in the trance of the calm, and in the teeth of the tempest; they will imprecate curses from the topsail-yard-arms, when most they teeter over to a seething sea; but in all my voyagings, seldom have I heard a common oath when God's burning finger has been laid on the ship; when His "Mene, Mene, Tekel Upharsin" has been woven into the shrouds and the cordage.</p>
    </div>

    <div id="right-sidebar">
        Optional Content
    </div>
</div>

<footer></footer>

CSS

#wrapper {
    display: table;
}

#left-sidebar, #content, #right-sidebar {
    display: table-cell;
    vertical-align: top;
}

header, footer {
    background: pink;
    width: 100%;
    height: 2em;
}

#content {
}

#left-sidebar {
    background: lime;
    max-width: 25%;
}

#right-sidebar {
    background: red;
    max-width: 25%;
}

Answer 2

Вы должны использовать либо floatс или display: tableЯ предпочитаю использовать последнее, но каждому свое.

<div id="wrapper">
    <div class="sidebar-one">
        some (or no) content
    </div>
    <div class="content">
        main content
    </div>
    <div class="sidebar-two">
        sidebar two
    </div>
</div>

#wrapper { display: table; }
#wrapper>div { display: table-cell; vertical-align: top; }
#wrapper .sidebar-one { max-width: 25%; }
#wrapper .sidebar-two { width: 25%; }