Я имею в виду довольно технический дизайн. Во-первых, должен быть «баннер» высотой 100% (с некоторыми минимальными и максимальными значениями) с фоновым изображением, идеально подходящим для его покрытия. Затем, за пределами вида ниже, должен быть div фиксированной высоты, использующий тот же фон , за исключением того, что он немного затемняется.
Я собрал макет, чтобы концепция была ясна:
.
Проблему можно проиллюстрировать с помощью этого jsfiddle, где я пытаюсь сделать div, закрывающий экран, внутри другого div, содержащего фон. Это не сработает, потому что height: 100% требует, чтобы все родители имели одинаковые настройки, но если я сделаю div с фоном 100%, то нижний div снова появится в поле зрения ...
И, как я понял, установка верхнего div на height: 110% или что-то в этом роде, а затем работа внутри него не дает желаемого результата. Если бы я мог установить его на 100% + 200px, это было бы здорово, но, увы, я не знаю, как это сделать, и не знаю хорошего обходного пути.
Любой, у кого есть решение или хорошие идеи, пожалуйста, бросьте их мне!
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/
Вы можете использовать calc в своем CSS:
height: calc(100% + 200px);
Используйте 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