How to leave a height-height fixed on the page?

Question

How to leave a height-height fixed on the page?

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

2

What causes the page to occupy 100% of the viewport, so that it does not have a scroll bar. Whether it's a small, medium, large, tablet, or desktop phone.

The height must be fixed, occupying the entire screen. No scrollbar. Do you understand what I want to do?

I put in css the height as 100% and also some variations but without success.

The layout will have at the top only a navbar and a very large title, the center an image and the footer.

How do I do this?

CSS: * {

    margin: 0;
    padding: 0;
}

body {

    height: 100%;
}

HTML:

<nav class="navbar navbar-default navbar-fixed-top">        <!-- "navbar-fixed-top" barra fixa no topo -->
    <div class="container-fluid">
        <div class="navbar-header">  <!-- MENU RESPONSIVO -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#barra">  
                <!--- Barra responsiva -->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a href="#" class="navbar-brand"> Menu </a>

        </div>


            <div class="collapse navbar-collapse" id="barra"> <!-- exibição de conteúdo do menu em qualquer tamanho/resolução -->
                <ul class="nav navbar-nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>               

                <form action="" class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Pesquisar"></input>
                    </div>

                    <button type="submit" class="btn btn-default"> Buscar </button>
                </form>
        </div>
    </div>
</nav>
<br>

<div class="container-fluid">
<div class="row">
<section>
    <img class="col-md-4" src="img/071.JPG">
</section>  
</div>
</div>

<footer> </footer>

html css css3 twitter-bootstrap front-end

asked by anonymous 03.12.2015 / 02:17

4 answers

How to pass an Object to another page using AngularJS? mysql errors being presented in French

score 3 · Answer 1

CSS is an inheritance language, ie there is a hierarchy of properties where the characteristics of the "Father" will overlap with those of the "Son", so every item you declare will inherit the "settings" of the parent element. I need to set the properties of it.

 html{  /*Elemento PAI*/ 
  width: 100%;
  height: 100%;
 }
 body{ /*Elemento FILHO*/
  width: 100%;
  height: 100%;
 }      

#principal{  /*DIV - Neste exemplo, ela é o "NETO". */
  width: 100%;
  height: 100%;  
 }

Follow a Snippet to further explain the explanation.

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

	#principal{
		width: 100%;
		height: 100%;
		background: black;
	}

h2{
  text-align: center;
  color: white;
}

<div id="principal">
<br><br>
  <h2>Div ocupando 100% do viewport</h2>

</div>

score 1 · Answer 2

You can make a <script> where it takes the height of your viewport, and then move to your css, for example:

var minhaAltura = $(window).height();
$('.ondeQuero').css("height",minhaAltura);

So it will always occupy 100% of your page.

score 1 · Answer 3

My approach would be to wrap the entire "page" in a div .container , with width and height defined.

div.container{
   position: relative;
   width: 100vw;
   height: 100vh;
}

The units vw and vh are, respectively, "viewport width" and "viewport height". Each unit corresponds to 1% of the size of the viewport, either horizontally (width) or vertically (height).

Within this div , it is easy to position the elements you want - such as nav or a centralized content -, using values and position: absolute .

score 0 · Answer 4

As far as I understand, the container-fluid should occupy the entire screen at the height of the device.

Therefore:

.container-fluid {
   height: 100vh;
}

It resizes the container as far as space is concerned. I advise for a min-height in it not to break into smaller screens at the time.