CSS для нескольких полноэкранных строк с Bootstrap

Мне нужна помощь с CSS, чтобы иметь 5 рядов, расположенных друг над другом, а каждая строка - 100% высоты и 100% ширины браузера.CSS для нескольких полноэкранных строк с Bootstrap

Вот мой HTML:

<div id="wrapper"> 
<div class="container-fluid"> 

    <div class="row-fluid fullscreen"><a name="1"></a>   
     <h1>section 1</h1> 
    </div> 

    <div class="row-fluid fullscreen"><a name="2"></a> 
     <h1>section 2</h1> 
    </div> 

    <div class="row-fluid fullscreen"><a name="3"></a>   
     <h1>section 3</h1> 
    </div> 

    <div class="row-fluid fullscreen"><a name="4"></a>   
     <h1>section 4</h1> 
    </div> 

    <div class="row-fluid fullscreen"><a name="5"></a>   
     <h1>section 5</h1> 
    </div> 

</div>

Вот мой CSS:

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

Спасибо заранее!

источник

2015-12-04 s15199d

что здесь проблема? Вы пытались использовать 100vh ?? –

@ikeMiguel 100vh не работает. Гейдель сделал скрипку ниже, где работает 100vh, но она не работает в моем коде. Интересно, если это Bootstrap, который вызывает 100vh, чтобы не работать. – s15199d

Добавили ли вы 100% к высоте и ширине для html и body? –

Вместо того, чтобы использовать 100% для вашей высоты, вы можете использовать 100vh. vh - высота видового экрана. Теперь

Ваш .fullscreen CSS должно быть:

.fullscreen { 
    height: 100vh; 
    width: 100% 
}

источник

2015-12-04 13:59:00

100vh не работает. Интересно, это b/c Bootstrap. – s15199d

@ s15199d вместо использования row-fluid, вы должны использовать только строку. Вы нашли решение? –

См пример может быть использован для вас: fiddle

CSS:

html,body {margin:0; padding:0; height:100%; width:100%;} 
#wrapper, .container-fluid, .fullscreen { height:100%; width:100%; }

источник

2015-12-04 13:52:17

Вы можете использовать viewport height свойство для установки высоты каждой DIV равна высоте экрана, как height: 100vh;

.fullscreen { width:100%; height: 100vh; }

http://jsfiddle.net/05w2bhoz/

Вы можете прочитать об этом, например, here или просто отправить его в Google.
Но, к сожалению, это не кросс-браузерный метод, поэтому, если вам нужна полная поддержка, вы должны использовать js или jQuery для установки высоты каждого div, равного высоте окна. Прочитайте это Get the browser viewport dimensions with JavaScript

источник

2015-12-04 13:53:00 Heidel

. Говорить, что это не кросс-браузерный метод, неверен, так как это может сделать любой новый браузер. Тем не менее, высказывание некоторых старых. – LGSon

@ Хейдель благодарит за скрипку. Ваша скрипка работает, но она не работает, когда я вставляю ваш css в свою. Интересно, вызывает ли Bootstrap 100vh не работать. – s15199d

просто заменить высоту: 100% от 100vh

.fullscreen { height:100vh; width:100%; }

источник

2015-12-04 13:53:32 bfahmi

CSS:

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

#wrapper { 
height: 100%; 
width: 100%; 
} 

.container-fluid { 
height: 100%; 
width: 100%; 
} 
.fullscreen { 
height: 100%; 
width: 100%; 
position: relative; 
}

HTML:

<div id="wrapper"> 
<div class="container-fluid"> 

    <div class="row-fluid fullscreen"><a name="1"></a>   
     <div class="span12"><h1>section 1</h1><span> 
    </div> 

    <div class="row-fluid fullscreen"><a name="2"></a> 
     <div class="span12"><h1>section 2</h1><span> 
    </div> 

    <div class="row-fluid fullscreen"><a name="3"></a>   
     <div class="span12"><h1>section 3</h1><span> 
    </div> 

    <div class="row-fluid fullscreen"><a name="4"></a>   
     <div class="span12"><h1>section 4</h1><span> 
    </div> 

    <div class="row-fluid fullscreen"><a name="5"></a>   
     <div class="span12"><h1>section 5</h1><span> 
    </div> 

</div>

источник

2015-12-04 13:53:54 Elow

попробовать это может помочь вам в вашем CSS

html, body 
{ 
height: 100%; 
} 
body 
{ 
min-height: 100%; 
} 
.fullscreen 
{ 
height:100vh; 
}

источник

2015-12-04 13:58:34

CSS для нескольких полноэкранных строк с Bootstrap

ответ

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