What is the best way to make a div span the entire height of the body?

I have a menu that I want to wrap inside a yellow div. The yellow div should take up the entire height of the green square, regardless of the content size in the green square. For example, if the orange square expands, the yellow div should also expand.

https://i.sstatic.net/ajqbt.jpg

Here is a snippet:

.top-menu{
            padding: 0%;
            margin: 0px;
        }

        .main-content{
            position: relative;
            width: 96.5%;
            left: 3.5%;
        }

        .wrapper{
            display: fixed;
            position: relative;
            width: 100%;
        }

        .left-menu{
            position: relative;
            height: 100%;
            width: 3.5%;
            float: left;
            z-index: 0;
            overflow: visible;
        }
<body style="border:5px solid blue">
          
          <div class="top-menu" style="border:1px solid red;height: 60px;">

      </div>


      <div class="wrapper"style="border:5px solid green">

          <div class="left-menu" style="border:3px solid yellow">
            
              <p>Here is where I want to put my menu and I want this div to be as tall as the pink div.</p>

          </div>

          <div class="main-content" style="border:5px solid orange;">
           <p><em>Your text here</em></p>

          </div>
      </div>
</body>

Expected outputhttps://i.sstatic.net/Wfka5.png

The height of the yellow square should match the height of the green square.

Can someone please assist me with this issue?

htmlcss

Answer №1

Here is a suggestion for you: Hello, In order to make the .left-menu position absolute, you will need to set its positioning relative to its parent element .wrapper

.top-menu{
    padding: 0%;
    margin: 0px;  
}

.main-content{
  
    position: relative;
  
    width: 96.5%;
    left: 3.5%;  
}
   .wrapper {
       display: fixed;
       position: relative;
       width: 100%;
   }

   .left-menu {
       position: absolute;
       height: 100%;
       width: 3.5%;
       float: left;
       z-index: 0;
       overflow: visible;
   }
<body style="border:5px solid blue">
  
  <div class="top-menu" style="border:1px solid red;height: 60px;">



</div>


<div class="wrapper"style="border:5px solid green">

    <div class="left-menu" style="border:3px solid yellow">
      
       <p>Here is where I want to put my menu and I want that this div to be as tall as the pink div</p>

    </div>

    <div class="main-content" style="border:5px solid orange;">
     <p>O que é o Lorem Ipsum?
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.

Porque é que o usamos?
É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente, propositadamente (como no caso do humor).


De onde é que ele vem?
Ao contrário da crença popular, o Lorem Ipsum não é simplesmente texto aleatório. Tem raízes numa peça de literatura clássica em Latim, de 45 AC, tornando-o com mais de 2000 anos. Richard McClintock, um professor de Latim no Colégio Hampden-Sydney, na Virgínia, procurou uma das palavras em Latim mais obscuras (consectetur) numa passagem Lorem Ipsum, e atravessando as cidades do mundo na literatura clássica, descobriu a sua origem. Lorem Ipsum vem das secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), por Cícero, escrito a 45AC. Este livro é um tratado na teoria da ética, muito popular durante a Renascença. A primeira linha de Lorem Ipsum, "Lorem ipsum dolor sit amet..." aparece de uma linha na secção 1.10.32.

O pedaço mais habitual do Lorem Ipsum usado desde os anos 1500 é reproduzido abaixo para os interessados. As secções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" do Cícero estão também reproduzidos na sua forma original, acompanhados pela sua tradução em Inglês, versões da tradução de 1914 por H. Rackham.

Onde posso arranjar algum?O que é o Lorem Ipsum?
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.

Porque é que o usamos?
É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos anos, por vezes por acidente, propositadamente (como no caso do humor).
</p>

    </div>
</div>

</body>

Answer №2

Do you approve of this?

.top-menu{
    padding: 0%;
    margin: 0px;
    
    
}

.main-content{
  
    position: relative;
  
    width: 96.5%;
    left: 3.5%;
    
    
}

.wrapper{
    display: fixed;
    position: relative;
    width: 100%;
}

.left-menu{
    position: relative;
    height: 100%;
    width: 3.5%;
    float: left;
    z-index: 0;
    overflow: visible;
}
<body style="border:5px solid blue">
  



</div>


<div class="wrapper"style="border:5px solid green">

    <div class="left-menu" style="border:3px solid yellow">
      
       <p>Here is where I want to put my menu and I want that this div to be as tall as the pink div</p>

    </div>

    <div class="main-content" style="border:5px solid orange;">
     <p>What is Lorem Ipsum?
Lorem Ipsum is a placeholder text from the typography and printing industry. Lorem Ipsum has been the standard text used by these industries since the year 1500, when someone mixed the characters of a text to create a book specimen. This text has not only survived 5 centuries, but also made the leap to electronic typesetting, remaining essentially unchanged. It was popularized in the 60s with the release of Letraset sheets containing passages of Lorem Ipsum, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a well-known fact that a reader is distracted by readable content on a page when looking at its layout. Therefore, the use of Lorem Ipsum leads to a more or less normal distribution of letters, as opposed to using "Content here, content here", making it readable text. Many desktop publishing tools and web page editors currently use Lorem Ipsum as their default text model, and a search for "lorem ipsum" will uncover many websites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes intentionally (as in the case of humor).


Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered its source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..." appears from a line in section 1.10.32.

The most common piece of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their original form, along with their English translation, versions of the 1914 translation by H. Rackham.

Where can I get some? What is Lorem Ipsum?
Lorem Ipsum is a placeholder text from the typography and printing industry. Lorem Ipsum has been the standard text used by these industries since the year 1500, when someone mixed the characters of a text to create a book specimen. This text has not only survived 5 centuries, but also made the leap to electronic typesetting, remaining essentially unchanged. It was popularized in the 60s with the release of Letraset sheets containing passages of Lorem Ipsum, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a well-known fact that a reader is distracted by readable content on a page when looking at its layout. Therefore, the use of Lorem Ipsum leads to a more or less normal distribution of letters, as opposed to using "Content here, content here", making it readable text. Many desktop publishing tools and web page editors currently use Lorem Ipsum as their default text model, and a search for "lorem ipsum" will uncover many websites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes intentionally (as in the case of humor).
</p>

    </div>
</div>

</body>

Answer №3

Consider utilizing a style similar to: height: 100%

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

Verify whether an HTML element lies within another HTML element

Consider this example: <div id="President"> <div id="Congressman"> <div id="Senator"> <div id="Major"></div> </div> </div> </div> Is there a simple way in JavaScript or jQuery to determine ...

javascriptjqueryhtml

Locate specific text within the content and apply an underline to it

Is there a way to locate specific text on my website and apply an underline to it? Suppose I have some text displayed and I wish to identify all instances of the word hello and underline them. Here is my attempt at the code: $( "body:contains('hell ...

jqueryhtmlcss

What is the best way to change a date from the format DD/MM/YYYY to YYYY-MM-DD

Is there a way to use regular expressions (regex) to convert a date string from DD/MM/YYYY format to YYYY-MM-DD format? ...

javascripthtmljsonregex

Adjust the element's height as you scroll

I am currently experimenting with a method to dynamically increase the height of an element based on user scrolling behavior. Despite trying multiple approaches, I have encountered challenges in getting it to work effectively. The concept is as follows: ...

javascriptjquerycssscrollgaussianblur

Step-by-step guide on implementing a border-bottom for an active link

Is there a way to apply a border-bottom to btn_articles and btn_posts when one of them is clicked? I attempted to use the active class but it did not have the desired effect. Any suggestions or solutions would be greatly appreciated. let btn_articles = ...

javascriptcss

Uninterrupted jQuery AJAX calls

I have a scenario where I need to periodically update an image on my view using ajax every 10 seconds. Any suggestions on how I can achieve this? Appreciate the help. ...

phpjavascriptjqueryhtml

How can I include multiple search forms on a single page in TYPO3 Ke_Search without any conflicts between them?

In the header of my website, I have a search form that is generated as a cObject from a content element containing a ke_search searchbox. When this form is submitted, it redirects to a /search page. In addition to this, I have subpages that are meant to se ...

htmlsearchtypo3content-management-systemtyposcript

Navigational Menu in PHP

My goal is to have one link that retrieves data from a table with a specific value and another identical link that pulls data from the same table but with a different value. However, both dropdowns are displaying in the link. <div class="col-sm-9"> ...

phpjqueryhtmlcss

Using jQuery to show and hide elements on a webpage

One issue I'm facing is changing the content on a page depending on the clicked link. The problem arises when the displayed content for one link persists even after clicking another link, despite setting it to not display when another link is clicked. ...

javascriptjqueryhtmlcss

Implementing a smooth transition for a never-ending CSS rotation animation upon clicking a different div with the help of jQuery

I am attempting to utilize jquery in order to bring a constantly rotating div (with CSS animation) to a gradual, smooth halt when another div is clicked. My current strategy involves changing the "animation-timing-function" property from "linear" to "ease ...

javascriptjquerycssanimationrotation

Is there a way to transmit a div using Node.js?

Scenario: I am developing a web application that allows users to draw on a canvas, save the drawing as an image, and share it with others using Node.js. Current Progress: Drawing functionality (real-time updates on both clients). Saving the canvas as a ...

javascripthtmlnode.jscanvas

Detecting changes in checkbox states

In my current scenario, I have a section of the screen that can be shown or hidden depending on whether a checkbox is checked. The user can change the state of the checkbox manually or programmatically. The challenge lies in detecting this change and upda ...

javascriptjqueryhtml

What is the method to dynamically modify the value of location.href using vanilla javascript?

I have a button that looks like this: <button type="button" class="play-now-button" onclick="location.href='www.yahoo.com'">Play Now</button> However, I want to change the location.href value using vanilla JavaScript. The code below ...

javascripthtmldebugging

How can I create a DIV element that consistently shows text when clicked?

Is there a way to achieve this effect using just CSS and HTML? When clicking on the question text, it should reveal the answer below, and clicking again should hide the answer. I have managed to make it work with hover, but I am unsure how to implement it ...

htmlcss

What are the steps to format text into 2 columns with a personalized design?

As I develop a website using HTML, CSS, and jQuery, I encountered a layout challenge. The text on the page is designed in a 2-column style, with an image positioned before it. Currently, the structure looks like this: <div> <div style=" ...

jqueryhtmlcss

ZeroClipboard intricate CSS issue

I have a list of images with an option box that appears on mouseover. The box contains an embedded code input field for copying purposes. I recently implemented zeroclipboard to enable the copy function on click. However, when I hover over an image and try ...

jquerycssxhtmlzeroclipboard

Even if there is no overflow, the scroll bar will always be visible with the

I'm currently working on a project titled "Scrolling JQuery Mobile Panel Apart from Content", and you can check out my progress here. In order to achieve what I want, I have applied the following CSS code. However, I am facing an issue where the over ...

cssjquery-mobile

What could be causing issues with angularjs ng-include not functioning properly in Chrome at times?

<html ng-app="myApp1"> <head> <title>NG-Include</title> <script src="angular.js"></script> <script src="filter.js"></script> </head> <body> <div ng-controller="myController"> ...

htmlangularjsgoogle-chrome

New Feature in Bootstrap4: Navigation Bar Alignment Shift to the Left

I need help aligning my links to the right side of the page I attempted to use mr-auto but it was not effective <body> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top mr-auto mt-2 mt-lg-0"> <a class="navbar-brand" hre ...

cssbootstrap-4navbar

Instructions for changing the background color of a value

I'm working with a code that populates values in table columns, but the text displays in black color. I would like to highlight the text with a blue background. Here is the HTML code snippet: <body> <div class="container"> ...

htmlcssservicenow