960px контейнер, но полная ширина заголовка/нижнего колонтитула вверх/под полноэкранным изображением bg

-1

Я использую веб-сайт Drupal и использую полный экран vegas vg. Я хочу достичь следующего: enter image description here Но у меня есть некоторые проблемы, связав нижний колонтитул: я хочу, чтобы он всегда отображался под фоновым изображением (так что вам нужно прокрутить вниз, чтобы увидеть нижний колонтитул), теперь он продолжает приближаться к изображение на заднем плане. Кроме того, я хочу, чтобы главное меню и нижний колонтитул стали полной шириной, а не 960px, как контейнер. Но я не могу заставить эти 2 «разбить» контейнер.960px контейнер, но полная ширина заголовка/нижнего колонтитула вверх/под полноэкранным изображением bg

Теперь я:

#footer { 
    position: absolute; 
    bottom:0; 
    width: 100%; 
    height:100px; 
    background-color: #202020; 
} 

#primary-menu-bar{ 
    position: absolute; 
    width: 100%; 
    height: 60px; 
    padding: 0; 
    margin: 0; 
    background-color: rgba(255,255,255,0.70); 
    padding-top: 10px; 
}

Обычно что-то вроде это трюк, но я изо всех сил, чтобы получить это право ...

Anybody какие-либо рекомендации или решения?

источник

2014-10-08 user3629755

Если «вегас» применяет изображение bg к телу (или html) ... вы не сможете это сделать. Нижний колонтитул всегда будет в одном или другом. –

можете ли вы предоставить некоторый HTML-код?В основном вы должны разместить #footer и # primary-menu-bar за пределами контейнера (который будет единственным с 960px) и поместили бы их в абсолютный. – Monte

Вы не показали HTML, так что я только что пришел с какой-то HTML себя. Если нижний колонтитул отображается только при прокрутке вниз, у вас должна быть какая-то оболочка для вашего заголовка и вашего элемента контента. Затем вы можете установить обертку min-height на 100% и использовать background-image/background-size для полноэкранного изображения.

HTML:

<div class="wrapper"> 
    <header class="page-head" role="banner"> 
     Header 
    </header> 
    <main class="main" role="main"> 
     Content 
    </main> 
</div> 
<footer class="page-foot" role="contentinfo"> 
    Footer 
</footer>

CSS:

html, body { 
    height: 100%; 
} 

.wrapper { 
    min-height: 100%; 
    background-image: url(http://placehold.it/1200x800); 
    background-position: center center; 
    background-size: cover; 
} 

.page-head { 
    background: red; 
} 

.main { 
    width: 80%; 
    margin: 0 auto; 
    background: yellow; 
} 

.page-foot { 
    background: blue; 
}

Смотрите пример на этом pen.

источник

2014-10-08 15:48:20 Daniel

использовал подобное решение, спасибо! – user3629755

Нам очень тяжело делать это с использованием HTML.

Так что в основном то, что вам нужно сделать, это разместить нижний колонтитул и заголовок за пределами контейнера. Поскольку контейнер имеет размер 960 пикселей, верхний и нижний колонтитулы могут переходить через него.

Структура должна быть такой:

<body> 
    <header></header> 
    <div class="container"></div> 
    <footer></footer> 
    </body>

Пример на codepen

источник

2014-10-08 15:43:37 Maverick

здесь возможное решение: http://jsfiddle.net/09mcoo2h/1/

, как я сказал в комментарии ниже ваш вопрос: вы должны иметь нижний колонтитул и коллектор вне контейнера (то есть единственный с 960px)

Чтобы иметь нижний колонтитул к нижней части страницу, просто установите тело как позицию: относительную.

HTML

<div id="primary-menu-bar"></div> 

<div id="container"></div> 

<div id="footer"></div>

CSS

body { 
    margin:0; 
    padding:0; 
    position:relative; 
} 

#container { 
    display:block; 
    width:960px; 
    height:1600px; 
    background:#eee; 
    margin:0 auto; 
} 

#footer { 
    position: absolute; 
    bottom:0; 
    width: 100%; 
    height:100px; 
    background-color: #202020; 
} 

#primary-menu-bar{ 
    width: 100%; 
    height: 60px; 
    top:0; 
    background-color: #F00; 
    padding-top: 10px; 
}

источник

2014-10-08 15:45:47 Monte

960px контейнер, но полная ширина заголовка/нижнего колонтитула вверх/под полноэкранным изображением bg

ответ

Смежные вопросы