How can I give my full height element?CSS

Question

I have this site:

http://avocat2.dac-proiect.ro/?page_id=21

We made some changes in code with firebug and got these items (still changes are not made on site)

Following changes looks like my site elements

This is code HTML:

     <div class="container-fluid" style="">
          <div class="entry-content2">
               <div class="gigi">
                    <div class="row">
                    <div class="col-sm-12  col-md-12  col-lg-12  style=" "="">
                         <img src="wp-content/themes/WordPressBootstrap-master/images/LOGOb.png" class="img-responsive center-block" style="min-width:156px;min-height:83px">
                    </div>
               </div>
          </div>
          <div class="container-fluid">
               <p class="text-center" style="color:white;font-size:17px;padding-left:50px;padding-right:50px;padding-top:20px;padding-bottom:20px;">
                    Am reprezentat şi am acordat consultanţă juridică pentru clienţi persoane fizice române şi străine, instituţii publice, persoane juridice române şi străine în următoarele domenii:
               </p>
               <div class="row sss">
                    <div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-2" style="font-size:17px;color:white;">
                         <p class="text-left">
                              Drept civil<br>
                              – agricultură, exploatări agricole, prelucrarea şi comercializarea produselor agricole;<br>
                              – comerţ cu produse alimentare;<br>
                              – imobiliar;<br>
                              – distribuţie de carburanţi;<br>
                              – transporturi;<br>
                              – asigurări;<br>
                              – producţie şi comercializare utilaje grele;<br>
                              – producţie structuri metalice;<br>
                              – design, fotografie, artă;
                         </p>
                         <p></p>
                    </div>
                    <div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-0" style="font-size:17px;color:white;">
                         <p class="text-left">
                              Drept administrativ<br>
                              – producţie automatizări;<br>
                              – servicii de proiectare;<br>
                              – comercializare automatizări;<br>
                              – jocuri de noroc;<br>
                              – turism, hoteluri şi pensiuni;<br>
                              – medical;<br>
                              – construcţii civile şi industriale;<br>
                              – comercializare utilaje şi autovehicule, service auto;<br>
                              – producţie software, administrarea site-urilor;
                         </p>
                          <p></p>
                    </div>
                    <div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-0" style="font-size:17px;color:white;">
                         <p class="text-left">
                              – comerţ;<br>
                              – bursier, societăţi listate, investitori, fonduri de investiţii;<br>
                              – asistenţă şi îngrijire copii şi vârstnici;<br>
                              – exploatări forestiere şi prelucrarea lemnului;<br>
                              – extracţia şi prelucrarea minereurilor;<br>
                              – producţia şi comercializarea materialelor de construcţii;<br>
                              – instituţii publice;<br>
                              – instituţii religioase.
                         </p>
                         <p></p>
                    </div>
                    <p></p>
               </div>
          </div>
     </div><!-- .entry-content -->
</div>

I put a picture to understand better what I want to do

I searched and I found here a method that can give 100% height of an element

Make div 100% height of browser window

Unfortunately we applied 100vh code below and do not look at all well.

.entry-content2
{
    background:url("http://avocat2.dac-proiect.ro/wp-content/themes/WordPressBootstrap-master/images/BODY-DROP.png");
    width:100%;
    height:100vh; // Here I applied this change      
}

I can not tell if I have correctly applied this amendment, the item to be.

Can you please help me solve this problem? Thanks in advance!

Answer 1

I suspect you want to move the entire <header id="masthead" class="navbar navbar-default" role="banner" style="background: transparent;"> element to the top of the website. Right now that element is styled as

.navbar-default {
  background-color: #f8f8f8;
  position: fixed;
  bottom: 12px;
  width: 100%;
}

That instruction says to place the entire header element (the purple box) at the bottom of the screen fixed, so its always there when users are scrolling. Is that what you intended? For a large element, that you want to show users, then let them scroll down to view the rest of the home page, you might be better off with position: relative. At this point, without home page content, the site doesn't scroll at all, there isn't any content there.

Again, in simple words, exactly what are you trying to achieve?

Update: I think you want to move the logo element

<div class="col-sm-12  col-md-12  col-lg-12  style=" "="">
       <img src="wp-content/themes/WordPressBootstrap-master/images/LOGOb.png" class="img-responsive center-block" style="min-width:156px;min-height:83px">
    </div>

from its current location to be inside of and at the top of the <header> element.

Easy to do. Is this site static html, or generated from a .php sheet somewhere? Is this a WordPress site? You have to just move the code in your html sheet. If this is WordPress (or someother Content Management System) its a bit more difficult. You have to do it in the .php code.

Oops. This is a wordpress theme. Two strong suggestions.

1) Learn how to do a child theme. It takes only 15 minutes to learn, and will save you hours and hours of work later. Think of this a magic tissue paper you lay on an existing / purchased theme. All your work goes on the tissue paper. When the theme updates, you don't lose any of your work.

2) Learn how to use the 3D View Tool in Firefox This will show you that the logo element is not in the same "box" as the rest of the purple header. To get there, right click on the screen in firefox. Click on Inspect Element. That will get you into Mozilla Developer tools. then check the little gear icon on the right hand side of the developer tool bar. Select [] 3D View. This places a 3D box icon on the developer tool bar. Now you can easily see that this site has LOTS of nested DIVS, some of which don't make much sense. It's your home page template, you can make it as simple as you need.

3) Wordpress is one of the best documented tools on the planet. Find a simple tutorial and start there (AFTER YOU CREATE A CHILD THEME).

good luck with it.

Answer 2

When i take your code and place it in my JSFiddle, then i get it to run. I took you CSS, the only thing i added was color: #ffffff; so i could read the text.

.entry-content2
{
    background-image:url("http://avocat2.dac-proiect.ro/wp-content/themes/WordPressBootstrap-master/images/BODY-DROP.png");
    color: #ffffff; // just added color
    width:100%;
    height:100vh; 
}

You can see the result of the fiddle here which creates a fullscreen div in height as well.

So if this fiddle does not work for you, then i suspect it must be some browser problem? or something with the tags before the .entry-content2 div. Could you place your full css and html code in the fiddle and test.

You can play around with the fiddle