Я имею в виду довольно технический дизайн. Во-первых, должен быть «баннер» высотой 100% (с некоторыми минимальными и максимальными значениями) с фоновым изображением, идеально подходящим для его покрытия. Затем, за пределами вида ниже, должен быть div фиксированной высоты, использующий тот же фон , за исключением того, что он немного затемняется.

Я собрал макет, чтобы концепция была ясна:

пример дизайна.

Проблему можно проиллюстрировать с помощью этого jsfiddle, где я пытаюсь сделать div, закрывающий экран, внутри другого div, содержащего фон. Это не сработает, потому что height: 100% требует, чтобы все родители имели одинаковые настройки, но если я сделаю div с фоном 100%, то нижний div снова появится в поле зрения ...

И, как я понял, установка верхнего div на height: 110% или что-то в этом роде, а затем работа внутри него не дает желаемого результата. Если бы я мог установить его на 100% + 200px, это было бы здорово, но, увы, я не знаю, как это сделать, и не знаю хорошего обходного пути.

Любой, у кого есть решение или хорошие идеи, пожалуйста, бросьте их мне!

2
user4325086 2 Мар 2015 в 15:14

3 ответа

Лучший ответ

Как насчет того, чтобы сделать нижний отступ для блока bankground? Это должно решить проблему.

.background {
    background: url('http://www.mixflavour.com/wp-content/uploads/2014/11/Nature-Wallpaper-03.jpg');
    position: relative;
    height: 100%;
    padding-bottom: 100px;
}

body, html {
    height: 100%;
}

.bottom-div {
    position: absolute; 
    bottom: 0;
    background:rgba(0,0,0,0.5);
    width: 100%;
    height: 100px;
}

Посмотрите демонстрацию здесь http://jsfiddle.net/kaa83qu7/

0
naman kalkhuria 2 Мар 2015 в 12:53

Вы можете использовать calc в своем CSS:

height: calc(100% + 200px);
0
Reptar 2 Мар 2015 в 12:19

Используйте calc для вычисления высоты фона.

.background {
    background: blue;
    position: relative;
    height: calc(100% + 100px);
}

body, html {
    height: 100%;
}

.max-height {

}

.bottom-div {
    position: absolute; 
bottom: 0;
    background:rgba(255,255,255,0.5);
    width: 100%;
    height: 100px;
}

http://jsfiddle.net/skeurentjes/jx7xLrpx/2/

Не забудьте проверить поддержку браузера: http://caniuse.com/#feat=calc

1
SKeurentjes 2 Мар 2015 в 12:20