Is there a way to make my item reach a height of 100%?

I've created a unique Wordpress theme and I'm looking to make an element 100% height to fill the remaining available space.

Here is the HTML code snippet:

<header id="masthead" class="navbar navbar-default" role="banner" style="
    background: transparent;
">


<div class="container-fluid">

<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>
 <!-- PLACE THIS CODE AFTER THE HEADER -->
        <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;">I have represented and provided legal advice for Romanian and foreign individuals, public institutions, Romanian and foreign legal entities in the following areas:</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">Civil law<br>
– agriculture, farms, processing and sale of agricultural products;<br>
– trade in food products;<br>
– real estate;<br>
– fuel distribution;<br>
– transport;<br>
– insurance;<br>
– heavy machinery production and sales;<br>
– production of metal structures;<br>
– design, photography, 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">Administrative law<br>
– automation production;<br>
– design services;<br>
– automation sales;<br>
– gambling;<br>
– tourism, hotels and guesthouses;<br>
– medical;<br>
– civil and industrial construction;<br>
– machinery and vehicle sales, auto service;<br>
– software production, website management; </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">
– commerce;<br>
– stock exchange, listed companies, investors, investment funds;<br>
– child and elderly care;<br>
– logging and wood processing;<br>
– ore extraction and processing;<br>
– production and sale of construction materials;<br>
– public institutions;<br>
– religious institutions.</p>
<p></p></div>
<p></p></div>
</div>
    </div><!-- .entry-content -->
</div>

<div class="container-fluid">


 <!-- PLACE THIS CODE AFTER THE HEADER -->
    <div class="container" style="
    background: #D9D9D9;
    width: 100%;
    padding-top: 30px;
    margin-top: 0px;
">
        <nav class="" role="navigation">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>




                </div>

            <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">


                <a class="screen-reader-text skip-link" href="#content">Skip to content</a>
                <div class="menu-menu-container"><ul id="menu-menu" class="nav-menu"><li id="menu-item-6" class="asd menu-item menu-item-type-post_type menu-item-object-page menu-item-6"><a href="http://avocat2.dac-proiect.ro/" class="<p>menu-image-title-before</p> menu-image-hovered">Home<span class="menu-image-hover-wrapper"><img width="46" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/HOME.png" class="menu-image <p>menu-image-title-before</p>" alt="HOME"><img width="46" height="48" src="http://avocat2.dac-proiect.ro/wp-content/uploads/2015/03/HOME2.png" class="hovered-image <p>menu-image-title-before</p>" alt="HOME2" style="margin-left: -46px;"></span></a></li>;
<!-- more menu items here -->


        </nav>
    </div><!-- .container -->
</div></header>

Currently, there is some space between my element and the top of the screen.

This is my CSS code snippet:

     .entry-content2
    {
      background:url("http://avocat2.dac-proiect.ro/wp-content/themes/WordPressBootstrap-master/images/BODY-DROP.png");
    width:100%;
height:100%; //We have tried to make a change so resole this problem

    }

Any ideas on how to resolve this issue?

Thank you in advance!

Answer №1

Consider utilizing the viewport height unit instead of percentage for more precise sizing

For example: height: 90vh;

I trust this suggestion will steer you in the right direction

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you Use CSS to Float Elements Left and Right while adjusting their Width Dynam

Is it possible to have two columns side by side with dynamic text using only CSS? I'm trying to make the left main text "break" into a new line when it reaches the right category, which is also dynamic. Do I need to use JavaScript for this? https://i ...

Achieving Consistent Aspect Ratios with Images in Flexbox Grid

I'm attempting to utilize flexbox for arranging elements in the layout shown below: -- ------ -- | | | | |--| |--| | | | | -- ------ -- Each corner 'box' contains an image with a square aspect ratio of 1:1. The center ...

Determine if the HTML Application Cache is void

Our website uses a "manifest.appcache" file to manage the application cache. Some pages are designed to be accessed offline, so they have references in the html tag to the manifest, while others do not. Is there a way to determine if the cache is empty ac ...

BeautifulSoup: Discovering all hyperlinks within a specified div class

Currently, I am in the process of gathering all href's from a div with the class 'server-name' on disboard.org/. Source-Code: def gather_links(): url = 'https://disboard.org/search?keyword=hacking' response = requests.get ...

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

[http://jsfiddle.net/w7r3gveg/]1 I am looking to position 4 Facebook logos in the center bottom of my background image. The background is represented by the 'bg' div, while the Facebook logo is in the 'facebook' div. Currently, I can ...

Ways to append each list item from one unordered list to the end of another based on their unique styles

I am in the process of making a website responsive and I am faced with the task of combining two different menus. In order to achieve this, I need to transfer all list items (li) from one unordered list (ul) to another. Provided below is a simplified vers ...

What could be causing the delay in my IP camera image updates?

I have implemented a jQuery script to update the src attribute of an <img> element on a webpage at regular intervals. However, I am facing an issue where the image is not consistently updated according to the specified setInterval. Interestingly, dir ...

What is the best way to dynamically display CSS code from a PHP variable without needing to refresh the

I am working on a page that utilizes ajax and PHP for all functions. Within the tab content, users have the option to select colors using color pickers. Once a user saves their chosen colors, I store the new CSS code in the database. The CSS code is as ...

What is the method for HTML inline handlers to retrieve the global window object and the variables contained within it?

During my coding test, I encountered an interesting scenario. I had a function called write and used a button with an inline onclick handler to trigger the write() function. function write(text) { alert(text) } <button onclick='write("Some tex ...

Creating a floating div that remains in place without disturbing the layout of the surrounding elements on

I am trying to place a div within a page at specific coordinates without affecting the rest of the content on the page. My initial approach was to give the parent container a position: absolute and the floating div a position: relative, then setting the p ...

Automatically load file and play audio when the page is loaded

I have created code that allows me to input an mp3 file, output the audio, and display a visual representation of the music. Currently, loading the file is done manually through an input type="file". Now, I want to change it so that the music automaticall ...

Make sure the font size on your iPhone matches the font size on other web browsers

Once upon a time, I came across an insightful article detailing a method to size text using CSS that is compatible with multiple browsers. The approach outlined in the article includes: body { font-size:100%; line-height:1.125em; /* 16×1.125=18 * ...

JavaScript can retrieve the default page name that is hidden within the browser's URL

When a URL is entered without a specific file name at the end, such as "www.google.com," the server typically serves a default file like "index.html" or "default.aspx." In this scenario, if the browser displays "www.google.com," I am looking to extract the ...

What could be causing my jQuery to only toggle the first arrow in my HTML?

I am facing an issue with a series of divs generated from data, each containing an arrow that should toggle an expandable section. Strangely, only the first div is functioning properly: toggling the arrow icon and revealing the content upon click. When th ...

Utilizing CSS3 to apply a customized background color to every set of three table rows

Is it possible to achieve what I want using CSS3 without Javascript? I've experimented with nth-child and nth-of-type, but couldn't get it to work. I have three table rows that I want to give a background color to, but the table rows beneath them ...

Toggle the disable state of a button depending on a specific condition

I have a scenario where I am fetching data from a server, and I need to apply a filter to a specific column. The requirement is that if the "bought" column (boolean) has a value of true, then the edit button should be disabled; otherwise, it should be enab ...

Is there a way to display tags on hover and darken an image on hover as well?

Currently, I am using a theme that does not include the feature to display tags when hovering or darken images and gifs on hover. You can view the theme here. I would like to modify my theme to show tags similar to this example theme: If anyone could ass ...

The vertical scrollbar appears to be malfunctioning

I'm experiencing an issue where the scrollbar is visible but not functioning as expected. I am utilizing CSS for styling the scrollbar and other layouts, along with HTML to apply the styling. #sub_menu, #content{ display: inline-block; } #sub_ ...

Trouble with displaying vertical scroll bar in React app when height is set to 100%

I am developing a React application where I need the content to always occupy at least 100% of the height to style the background accordingly. I have attempted to achieve this by setting the CSS height to 100% at the top level, which works fine. However, t ...

Alternate CSS options for controlling printing besides page-break-after and page-break-before

I am in the process of creating a web interface for printing barcodes on Avery label sheets. How can I ensure that the barcodes align perfectly on each label, using measurements like inches or centimeters? And most importantly, how do I prevent the barcode ...