Divs в моей веб-странице не будет охватывать ширину 100% страницы

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

html,body{ 
    height:100%; 
    width:100%; 
    margin: 0px; 
    padding: 0px; 

    } 

    #blogheader{ 

     background-color: green; 
     height: 57%; 
     margin: 0px; 


    }

Любая помощь очень ценится !, Я застрял на этом около часа. Я не знаю, почему это происходит. Я использую bootstrap. Но единственная комбинация строк/столбцов, которую я имею, находится в центре, где находятся три значка.

источник

2016-04-23 Brandon Nolan

Вопросы, ищущих код помощи должны включать короткий код, необходимый для его воспроизвести ** в самом вопросе ** предпочтительно в [** Stack Отрывок **] (https: // blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). См. [** Как создать минимальный, завершенный и проверяемый пример **] (http://stackoverflow.com/help/mcve) –

В большинстве случаев, когда я вижу эту проблему, это связано с недействительным HTML, как div, который не закрывается должным образом. Но без полного фрагмента кода я не могу сказать вам причину. Проверяется ли ваш HTML? И каковы ваши ширины для пружинных, угловых и ботстраповных div? –

-1

Try:

html, body { 
    height:100px; 
    width:100vw; 
    margin: 0px; 
    padding: 0px; 
}

источник

2016-04-24 00:22:47

Хотя этот ответ, вероятно, правильный и полезный, рекомендуется, если вы [включите какое-то объяснение вместе с ним] (http://meta.stackexchange.com/q/114762/159034), чтобы объяснить, как это помогает решить проблему. Это становится особенно полезным в будущем, если есть изменения (возможно, не связанные), которые заставляют его перестать работать, и пользователи должны понимать, как он работал. Благодаря! – Hatchet

Вы упоминаете вы используете Bootstrap.

Я могу воспроизвести ошибку, которая, кажется, была из-за того, что «blogheader не находится в обертке .row.

Codepen Demo

Без .rowзрения @ полноэкранным

html, 
 
    body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    } 
 
    .container-fluid { 
 
    height: 100%; 
 
    } 
 
    #blogheader { 
 
    background-color: green; 
 
    height: 50px; 
 
    margin: 0px; 
 
    } 
 
    .col-sm-4 { 
 
    height: 50px; 
 
    background: pink; 
 
    border: 1px solid grey; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 

 
    <div id="blogheader"></div> 
 

 
    <div class="row"> 
 
    <div class="col-sm-4"></div> 
 
    <div class="col-sm-4"></div> 
 
    <div class="col-sm-4"></div> 
 
    </div> 
 
</div>

С .rowзрения @ полноэкранным

html, 
 
    body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    } 
 
    
 
    .container-fluid { 
 
    height: 100%; 
 
    } 
 
    
 
    #blogheader { 
 
    background-color: green; 
 
    height: 50px; 
 
    margin: 0px; 
 
    } 
 

 
.col-sm-4 { 
 
    height: 50px; 
 
    background: pink; 
 
    border:1px solid grey; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div id="blogheader"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-4"></div> 
 
    <div class="col-sm-4"></div> 
 
    <div class="col-sm-4"></div> 
 
    </div> 
 
</div>

источник

2016-04-24 12:01:56

Divs в моей веб-странице не будет охватывать ширину 100% страницы

ответ

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