Как я могу добиться этого макета, используя только CSS?

0

Изображение 174551

Я пытаюсь построить макет, который имеет два div-блока рядом друг с другом. Оба они сосредоточены на странице. Левый блок (1) изменяется по ширине в зависимости от того, сколько места доступно в окне (от 300 пикселей до 400 пикселей). Блок 2 имеет фиксированную ширину 640 пикселей и не изменяется. Высота обоих блоков простирается до нижней части страницы. Если один блок больше другого, чем другой блок, он будет компенсировать пробел (с сохранением цвета фона).

В качестве примера можно использовать видеостраницу Youtube, но в моем случае большой блок находится справа. Обратите внимание, что правый прямоугольник youtube (предлагаемые видео) становится больше или меньше от 300-400 пикселей при изменении размера окна.

Это лучшее, что я могу придумать:

http://jsfiddle.net/7dL5z/

body {
    margin:0;
    padding:0;  
    height:100%;
}

#wrapper {
    max-width:1040px;
    min-width:940px;
    margin:0 auto;  
    height: auto;
    min-height: 100%;
}

#left {
    float:left;
    min-width:300px;
    max-width:400px;
    height:100%;
    background:#EEE;
}

#right {
    float:right;
    width:640px;
    height:100%;
    background:#666;    
}

<html>
  <body>
    <div id="wrapper">
      <div id="left">left</div>
      <div id="right">right</div>
    </div>
  </body>
</html>

Две проблемы:

1) Я не могу заставить divs растянуться на дно.

2) Добавление float в блок 1 делает свойство min-width бесполезным

Если возможно, я ищу бесплатное решение для запросов в формате JS и CSS.

У кого-нибудь есть ключ?

  • 1
    Вы заботитесь о поддержке браузера? Это можно сделать с помощью display: table-cell .
  • 0
    Да, я бы хотел, чтобы большинство браузеров поддерживали его.
Показать ещё 1 комментарий
Теги:
layout
design

5 ответов

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

Несколько вещей:

Вы должны добавить

html {
height:100%;
}

чтобы получить элементы html sub, чтобы они соответствовали окну. Затем удалите height:auto из wrapper.

Если у вас установлена максимальная ширина в пикселях на обертке, не сообщая ей о переменной ширины относительно окна (например, width:90%), содержимое не может изменить размер при изменении размера браузера, поскольку их ширина фиксирована.

Поэтому я добавил width:90% для демонстрационных целей. Вы можете настроить его на любой процент, который, по вашему мнению, выглядит хорошо в окне.

Поместите свой right div перед вашим left в свой html так:

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

а затем вы можете использовать left чтобы заполнить пространство слева right не плавая или не указывая ширину. Установка ширины макс и мин на обертке будет держать left от получать слишком маленький или большой.

Итак, последний css будет:

html, body{
margin:0;
padding:0;  
height:100%;
}

#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;  
height: 100%;
width:90%;
}

#left {
overflow:hidden;
height:100%;
background:#EEE;
}

#right {
float:right;
width:640px;
height:100%;
background:#666;    
}
Поделиться
  • 0
    Потрясающие! Решение без необходимости использовать дисплей: таблица, которую я нахожу лучше
  • 0
    Скромное , довольно изящное решение, и, я думаю, оно совместимо со многими более старыми версиями IE, поскольку не использует display: table .
Показать ещё 5 комментариев
1

Вот один из способов сделать это с помощью display: table-cell.

html {
    height: 100%;
}
body {
    margin:0;
    padding:0;  
    height:100%;
}

#wrapper {
    margin:0 auto;  
    height: 100%;
    display: table;
    min-width: 940px;
}

#left {
    display: table-cell;
    height:100%;
    min-width: 300px;
    max-width: 400px;
    background:#EEE;
}

#right {
    display: table-cell;
    width: 640px;
    height: 100%;
    background:#666;    
}

Чтобы получить размер панелей до 100% высоты браузера, вам нужно установить высоту в элементе html.

Поведение может быть близко к тому, что вам нужно.

См. Демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/ZVN97/

Поделиться
  • 0
    При уменьшении размера окна левый блок не сжимается по ширине, вместо этого правый блок перемещается вправо
  • 0
    @deArtish Это не совсем то поведение, которое я вижу (Win7, Chrome 31), если я понимаю, что вы описываете. Когда я 400px страницу, я вижу, что левый блок сначала начинает уменьшаться с 400px до 300px , в то время как правый блок перестает двигаться (и не выталкивается из поля зрения). После того, как левый блок достигает 300px , оба блока продолжают выталкиваться за пределы экрана вправо (левая сторона привязана к левой стороне экрана).
Показать ещё 5 комментариев
0

Если вы используете jQuery, вот мой ответ:

$(document).ready(function() {
layoutInit();

$(window).resize(function() {
  layoutInit();
});

function layoutInit() {
    // you can also hard code the max-width and min-width in the javascript,
    // following function is used to remove "px" on "1040px"-like strings from CSS
    var pxStriper = function(str) {
        return str.substr(0, str.length - 2);
    }

    // all parameters you need to update the layout:
    var bodyWidth = $("body").width(),
        bodyHeight = $("body").width(),
        wrapperMaxWidth = pxStriper($("#wrapper").css("max-width")),
        wrapperMinWidth = pxStriper($("#wrapper").css("min-width")),
        rightWidth = pxStriper($("#right").css("width"));

    // 3 different situations with width of the body:
    if (bodyWidth <= wrapperMaxWidth && bodyWidth >= wrapperMinWidth) {
        // 1:
        $("#wrapper").css('width', bodyWidth);
        $("#left").css('width', bodyWidth - rightWidth);
    } else {
        if (bodyWidth > wrapperMaxWidth) {
            // 2:
            $("#wrapper").css('width', wrapperMaxWidth);
            $("#left").css('width', wrapperMaxWidth - rightWidth);
        } else {
            // 3:
            $("#wrapper").css('width', wrapperMinWidth);
            $("#left").css('width', wrapperMinWidth - rightWidth);                
        }
    }

    // update the height:
    $("#wrapper").height(bodyHeight)
}});
Поделиться
0

Что-то вроде этого http://jsfiddle.net/pmj7Z/ может быть?

html, body {
    margin:0;
    padding:0;  
    height:100%;
}

#wrapper {
    max-width:1040px;
    min-width:940px;
    margin:0 auto;  
    height: 100%;
}

#left {
    display: block;
    float: left;
    min-width:300px;
    max-width:400px;
    height:100%;
    background:#EEE;
}

#right {
    float: right;
    width:640px;
    height:100%;
    background:#666;    
}
Поделиться
  • 0
    При этом между блоками есть зазор, а левый блок не уменьшает ширину при изменении размера
0

Мое решение - это установленная оболочка для display: table & its childs для display:table-cell.

Обе области будут расширяться, когда один из них переполнит размер экрана. Если нет, то оба будут расширяться донизу (100%).

http://jsfiddle.net/7dL5z/4/

HTML:

<body>
    <div id="wrapper">
        <div id="left">
            <p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
        </div>
        <div id="right">right</div>
</div>
</body>

CSS:

body {
    margin:0;
    padding:0;  
    height:100%;
}

#wrapper {
    display: table;
    height: 100%;
    margin:0 auto;  
    max-width:700px;
    min-width:500px;
    width: 100%;
}

#left {
    background:#EEE;
    display: table-cell;
    max-width: 300px;
    min-width: 100px;
    width: 40%;
}

#right {
    display: table-cell;
    background:#666;    
}
Поделиться
  • 1
    Для меня левая панель не меняет ширину, и это одна из особенностей, которую пытается достичь OP.
  • 0
    Я обновил ответ. Просто установите ширину эластичного столбца и определите максимальные и минимальные значения. Для этого стол также должен иметь определенный эластичный размер (ширина: 100% и максимальная / минимальная ширина ..)
Показать ещё 3 комментария

Ещё вопросы

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