Полная ширина фона, без оболочки - PullRequest
Новая
       2

Полная ширина фона, без оболочки

3 голосов
/ 01 июня 2011

Я работаю над сайтом и думал, что увижу, есть ли лучший способ добиться того же результата.

Проблема: Страница состоит из нескольких разделов, каждый со своим фоном, который должен быть шириной браузера. Содержимое каждого раздела имеет размер 960 пикселей по центру. В настоящее время я обертываю каждый раздел в, казалось бы, бессмысленной обертке. У кого-нибудь есть лучшее решение?

Пример кода: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Problem Example</title>

<style>
    .content{
        width:960px;
        margin: 0 auto;
        padding: 90px 0;
        background: rgba(0,0,0,0.5);
    }

    #header_wrapper{
        background: red
    }

    #content_wrapper{
        background: green
    }

    #footer_wrapper{
        background: yellow
    }
</style>
</head>

<body>
<div id="header_wrapper">
    <div class="content">
        Header Content
    </div>
</div>
<div id="content_wrapper">
    <div class="content">
        Content Content
    </div>
</div>
<div id="footer_wrapper">
    <div class="content">
        Footer Content
    </div>
</div>
</body> 
</html>

Идеальное решение : та же страница, но без 3 дополнительных разделителей-обёрток.

Предложения кому-нибудь?

Ответы [ 6 ]

2 голосов
/ 01 июня 2011

если вы хотите иметь динамическую высоту, а не использовать изображение для bg, я думаю, что это лучшая практика

1 голос
/ 01 июня 2011

Ваши требования противоречивы.

Вы указываете, что каждый из трех разделов должен охватывать всю ширину страницы (и содержать различный фон), но содержимое каждого из них должно быть ограничено до 960 пикселей.Один div не может одновременно иметь ширину 100% и ширину 960 пикселей.Если не использовать магию JavaScript, когда вы возитесь с пробелами, вы не сможете достичь этого без сложенных элементов div.

0 голосов
/ 18 июня 2015

Я не знаю, насколько актуален этот вопрос, но, поскольку я просто искал его, я нашел этот вопрос, и могут быть люди, которые интересуются этим другим, а не я.

Немного повозившись, я действительно заставил его работать, и я хочу просто представить свое решение. 

<main>
    [your content here]
</main>

main {
    background: red;
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

main::before {
    background: blue;
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50vw;
    right: -50vw;
    z-index: -1;
}

То же самое должно работать и с элементом :: after, если это необходимо.

По сути, я создаю псевдоэлемент той же высоты, что и родительский элемент (но вы можете увеличить его при отрицательных значениях) и использовать слишком большую ширину, основанную на ширине области просмотра. Он не основан на процентах, поскольку процент будет относиться к элементу <main>. Вы можете использовать процент, если вам нужно поддерживать старые браузеры, но вам нужно будет определить число для себя. Затем он помещает один слой позади родительского элемента, чтобы он оставался видимым.

Есть один небольшой недостаток, который, на мой взгляд, на самом деле не имеет значения. При таком подходе тело (или любой элемент, являющийся родителем <main> / ваш элемент) получает горизонтальную полосу прокрутки, поскольку псевдоэлемент на самом деле больше, чем область просмотра. Вы можете легко подавить это с помощью overflow-x: hidden на теле, и это не должно создавать никаких проблем для центрированного макета в любом случае. Я бы предположил, что в центрированном макете никогда не должно быть точки, где вам действительно нужно горизонтальное переполнение.

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

Однако я не знаю, как это решение работает с точки зрения производительности, поскольку я не знаю, как работают движки рендеринга в наши дни. Было время, когда все, что было за кадром, также отображалось (отсюда и причина того, что печально известная техника сокрытия элементов нашла свой путь в мусорную корзину очень быстро), но в наши дни это не должно быть проблемой.

0 голосов
/ 16 февраля 2012

Подход, который будет работать, заключается в использовании псевдоэлементов (: before,: after) для добавления фона слева и справа от контейнеров, которые имеют фиксированную ширину.Это будет работать для простых фонов, но, вероятно, станет сложнее, если вы хотите более сложный фон с изображениями.

Чтобы узнать больше об этой технике, прочитайте этот пост об этом на csstricks.1005 *

0 голосов
/ 01 июня 2011

То, что у вас уже есть, довольно функционально, возможно, альтернатива состоит в том, чтобы удалить div обертки для вашей области content и установить вместо него body.Небольшие сбережения, но это на один дележ меньше.

0 голосов
/ 01 июня 2011

Как то так? 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Problem Example</title>

<style>
    .section{
        width:960px;
        margin: 0 auto;
        padding: 90px 0;
        background: rgba(0,0,0,0.5);
    }

    .header  {background: red   }
    .content {background: green }
    .footer  {background: yellow}

</style>
</head>

<body>
<div class="header section">
    Header Content
</div>
<div class="content section">
    Content Content
</div>
<div class="footer section">
    Footer Content
</div>
</body> 
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...