CSS: Height 100vh does not work correctly

Question

CSS: Height 100vh does not work correctly

Navigation

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

0

In CSS there is a way to get the full height of the html document which is 100vw, and it is not getting all the height correctly.

The CSS looks like this:

#menu{
    background-color: #252525 !important; 
    height: 100vw;
}

And the page looks like this:

Without inspecting open item: With the inspect open element:

When adding another record via form

I could solve it by setting 102vw, but also by adding a new record, I would not get 100%, how could I solve this problem?

The structure of the file is as follows:

<body>
            <div class="bg-dark dk" id="wrap">

                <div id="top">
                    @include('cms.public.includes.header') <!-- TOP DIV -->
                </div>

                <div id="left"> <!-- ESTE ES EL DIV QUE QUIERO APLICAR EL ESTILO CSS -->
                            @include('cms.public.includes.left') <!-- LEFT DIFT -->
                </div>

                <div id="content">

                    @yield('content')

                </div>

                <div id="right" class="onoffcanvas is-right is-fixed bg-light" aria-expanded=false>

                        @include('cms.public.includes.header')                   

                </div>
            </div>

            <footer class="footer">
                @include('cms.public.includes.footer') <!-- FOOTER -->
            </footer>

</body>

When applying the style to the div id="left" I get the same result.

html css

asked by Lluís Puig Ferrer 12.09.2017 в 12:53

source

2 answers

Error: "Fill is not a member of OleDbCommand" switch inside another switch

score 1 · Answer 1

You are confusing yourself of units:

100vw = 100% of the width of the viewport , not the document.

100vh = 100% of the height of the viewport , not the document.

The viewport is the visible part of the document, so its size is the same as window.innerHeight * window.innerWidth

I'll give you an example of how to do it, using flexbox:

#container {
  display: flex;
  border: 2px dashed red;
  background-color: lightyellow;
  min-height: 100vh; /*Como mínimo, el documento ocupará toda la pantalla*/
}
#container > div {
  width: 50%;
  
}
div.left {
  background-color: #252525;
  color: white;
}

<div id="container">
  <div class="left">
    <ul>
      <li> 1</li>
      <li> 2</li>
      <li> 3</li>
    </ul>
  </div>
  
  <div>
    <p>Lorem ipsum... bla bla bla bla</p>
    <p>En un lugar de la Mancha de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo...</p>
    <p>Lorem ipsum... bla bla bla bla</p>
  </div>
  
</div>

score 0 · Answer 2

One technique is to give the body and html a high (Yep, the html tag may also have a high) In this way, you are setting the document's height before you start working with it with your code.

.html,body{
    height:100vh;
}