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

0

Мне нужно построить почти стандартную компоновку 3 столбцов

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

Если sidebar1 и 2 имеют width:25% а поле для контента - 50%. И он работает идеально.

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

Конечным результатом является растяжение содержимого div до 75%, когда sidebar1 пуст.

Можно ли сделать это без уродливых взломов css или с помощью JS? Я проверил множество решений, и большинство из них работают неправильно.

  • 0
    уродливые css хаки ?? это не вуду, здесь css это css.
  • 0
    Вы пытались не назначать ширину центральной колонке? Убедитесь, что остальные два имеют ширину или хотя бы вторую, и посмотрите, заполняет ли она пространство, когда первая имеет ширину 0. РЕДАКТИРОВАТЬ: на самом деле это будет работать, только если вы используете отображение таблицы или css: таблица et. и др. Хорошо, если вы могли бы включить любую разметку и CSS, которые у вас уже есть. Если вы хотите быть действительно полезными для нас, поместите это в скрипку .
Показать ещё 2 комментария
Теги:
layout
autosize

2 ответа

2
Лучший ответ

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

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 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%;
}
Поделиться
  • 0
    Большое спасибо. Это то, чего я пытался достичь.
  • 0
    @KamilKrzes - Должен сказать, я немного раздражен. Я отправил этот же код на 6 минут раньше, чем этот ответ. Тогда вы не приняли мой ответ для этого. Почему вы говорите, что этот ответ правильный, а мой нет?
Показать ещё 3 комментария
3

Вы должны использовать либо float s, либо 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%; }
Поделиться
  • 0
    Большое спасибо. Сначала я пытаюсь поместить код в скрипку, и это сработало. По моему не так я начал искать. Это идет не так, потому что обертка верхнего уровня с плавающей точкой: слева. Ну, я ненавижу работать над кем-то испорченными проектами. Особенно макеты.
  • 0
    @KamilKrzes - так что возьмите float: left без оболочки верхнего уровня. Зачем вам float: left что-то, что рассчитано на всю ширину экрана?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню