Why don't 100vh work with p element?

Question

I have a sidebar and I want it to fit the browser height.So I used 100vh.

It does work if I deleted the p element(with the background-text class).

 * {
  margin:0;
  padding:0;
 }

 body{
  overflow:hidden;
 }

 .wrapper>div{
  display:inline-block;
 }

 .sidebar{
  background-color:#4e4e4e;
  height:100vh;
  width:25%;
 }
 .picproperties{
  padding:30px 0px 0px 30px;
 }
 .background-text{
  display:block;
 }

 .returnbar{
  height:25px;
  background-color:#5a5a5a;
 }


 .workspace{
  height:100vh;
  width:75%;
  background-color:red;
  
 }

<body>
 <div class="wrapper">
  <div class="sidebar">
   <div class="returnbar">
    <div class="returnbtn"></div>
   </div>
   <div class="picproperties">
    <div class="pp-background">
     
    </div>
    <div class="pp-ratio">
    </div>
    <div class="pp-patterns">
    </div>
   </div>
   <div class="imgproperties">
    <div class="ip-layers">
    </div>
    <div class="ip-image">
    </div>
   </div>
  </div><!--
  --><div class="workspace">
  
  </div>
 </div>
</body>

But when I keep the p element It doesnt work

 * {
  margin:0;
  padding:0;
 }

 body{
  overflow:hidden;
 }

 .wrapper>div{
  display:inline-block;
 }

 .sidebar{
  background-color:#4e4e4e;
  height:100vh;
  width:25%;
 }
 .picproperties{
  padding:30px 0px 0px 30px;
 }
 .background-text{
  display:block;
 }

 .returnbar{
  height:25px;
  background-color:#5a5a5a;
 }


 .workspace{
  height:100vh;
  width:75%;
  background-color:red;
  
 }

<body>
 <div class="wrapper">
  <div class="sidebar">
   <div class="returnbar">
    <div class="returnbtn"></div>
   </div>
   <div class="picproperties">
    <div class="pp-background">
     <p class="background-text">Background :</p>
    </div>
    <div class="pp-ratio">
    </div>
    <div class="pp-patterns">
    </div>
   </div>
   <div class="imgproperties">
    <div class="ip-layers">
    </div>
    <div class="ip-image">
    </div>
   </div>
  </div><!--
  --><div class="workspace">
  
  </div>
 </div>
</body>

How can I keep the p element and still make the sidebar fit the browser screen height (sorry for my bad english).

score 1 · Accepted Answer · edited May 23 '17 at 10:26

if you add float:left to sidebar it works:

 * {
  margin:0;
  padding:0;
 }

 body{
  overflow:hidden;
 }

 .wrapper>div{
  display:inline-block;
 }

 .sidebar{
  background-color:#4e4e4e;
  height:100vh;
  width:25%;
      
       float:left;
 }
 .picproperties{
  padding:30px 0px 0px 30px;
 }
 .background-text{
  display:block;
 }

 .returnbar{
  height:25px;
  background-color:#5a5a5a;
 }


 .workspace{
  height:100vh;
  width:75%;
  background-color:red;
  
 }

<body>
 <div class="wrapper">
  <div class="sidebar">
   <div class="returnbar">
    <div class="returnbtn"></div>
   </div>
   <div class="picproperties">
    <div class="pp-background">
     <p class="background-text">Background :</p>
    </div>
    <div class="pp-ratio">
    </div>
    <div class="pp-patterns">
    </div>
   </div>
   <div class="imgproperties">
    <div class="ip-layers">
    </div>
    <div class="ip-image">
    </div>
   </div>
  </div><!--
  --><div class="workspace">
  
  </div>
 </div>
</body>

for an overview on css designing principles take a look at this!!

Why don't 100vh work with p element?

1 Answers1