Жидкий div с шириной 100%

Question

Жидкий div с шириной 100%

0

У меня есть html-структура, подобная той, что приведена ниже, с боковой панелью и основным контейнером. Я хочу иметь фиксированную ширину боковой панели (а затем менять ее с помощью медиа-запросов) и основного контейнера, в котором жидкость. Это означает, что если я уменьшу ширину браузеров, основной контейнер должен уменьшаться по ширине, а не боковой панели.

Я пробовал 100% ширину # контейнера, 15% ширины боковой панели и 85% ширины основного контейнера, но это (конечно) также уменьшает ширину боковой панели. Использование только 100% -ной ширины основного контейнера и фиксированной ширины контейнера боковой панели не работает.

Каков наилучший способ решения этого?

HTML:

<div id="container">
    <div id="sidebar">
        //content
    </div>
    <div id="main">
        //content
    </div>
</div>

 ________________________
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
|     |                  |
--------------------------

holyredbeard 20 март 2014, в 14:49

Источник

Теги:

html

css

width

3 ответа

Ещё вопросы

demonofthemist · Answer 1 · 2014-03-20T11-48-00.000Z

Использовать следующий css

.container{display:block; padding:0 0 0 200px;}
.sidebar{display:block; float:left; width:200px; margin:0 0 0 -200px;}
.main{display:block; width:100%}

pbenard · Answer 2 · 2014-03-20T10-54-00.000Z

2

Скрипт: http://jsfiddle.net/3ApFZ/

Css:

#sidebar{
    width:150px;
    position: absolute;
    background:blue;
    height:100%;

}
#main{
    width:100%;
    padding-left: 150px;
    background:red;
    height:100%;
}

pbenard 20 март 2014, в 10:54

0

хаха обе наши скрипки идентичны. Я думаю, два человека не могут ошибаться. Посмотрим, что думает ОП :)
LOTUSMS 20 март 2014, в 13:49
0

@LOTUSMS Проблема: Когда мы смотрим: 0 ответ, когда мы публикуем: 4 ответа;) все в 40-х ...
Pimento Web 20 март 2014, в 13:50
0

@TheLittePig: палец вверх:
LOTUSMS 20 март 2014, в 13:52

Показать ещё 1 комментарий

LOTUSMS · Answer 3 · 2014-03-20T11-07-00.000Z

Несколько дней назад я помог кому-то с подобным. Что делать, если вы использовали следующую DEMO

В основном, устанавливая левую сторону ширины фиксации, а правую сторону - изменяемую ширину

.left {width:100%; height:20px; background-color:red; float:left; margin-left:-320px; display:inline}
.right {width:320px; height:20px; background-color:blue; float:right; display:inline}