How to expand your Divi standard section to full height with one line of code

Jan 24, 2018

https://www.plantillaslago.com/6tz3apdl Disclaimer: This site is a labour of love, but love doesn’t buy me matcha lattes. Affiliate commissions for awesome internet tools, on the other hand, totally buys me matcha lattes. This post probably contains some affiliate links. Read my affiliate disclaimer here.

https://www.plantillaslago.com/rs9w5vlbd0u

Buy Ambien Cr 12.5 Mg I’m working on a client site this week and I’m going for a modern, almost futuristic design.

https://www.fogliandpartners.com/ekpu660gb6

https://municion.org/990o3jxpq01 It’s important to me the header is eye-catching, so I wanted to make the header area — also known as the Hero area — full height with left aligned elements.

If I were to use the Divi fullwidth section, I could have a full-height section as well, but this isn’t an option for this site. To achieve left aligned elements, I have to use a standard section because the fullwidth section is one column, fullwidth across the screen.

https://www.salernoformazione.com/gb7li7z

Purchase Ambien Online Canada This means I’m stuck using the standard section, but full height is not an option when you’re using the Divi standard section.

Ambien Uk Buy

https://yourartbeat.net/2025/03/11/lnu27ll257 So what do you do?

This is one of those times when knowing a bit of code is useful even if you’re just a Divi designer.

https://www.varesewedding.com/ee0zpwa

Zolpidem Tartrate Buy Online The code I’m using here is one simple line of CSS, and here’s what you do.

Step 1: Define the CSS Class.

https://www.tomolpack.com/2025/03/11/hh5t0wx Open up the settings for your section and go to the “advanced” tab. There, define the CSS Class. I named mine header. Save and exit.

https://www.emilymunday.co.uk/792h8ehq

Step 2: Add this code.

https://www.scarpellino.com/h7s8kp7ngk7 Open up Divi Theme Options and down at “Additional CSS” add this line of code.

https://www.emilymunday.co.uk/g2u8nw6eu .header {height: 100vh;}

https://chemxtree.com/enthwmwmm Save.

Step 3: Confirm it worked.

https://www.mdifitness.com/56zc0osir Open the page in a new browser tab and refresh to see the new full-height section.

https://www.fogliandpartners.com/241cxvxt Viola!

https://www.infoturismiamoci.com/2025/03/045dsa0rdjx If you’re curious how this works, you’re defining 100% of the viewport height. This will ensure the section — regardless of device — will be full height.

25 Comments

  1. elkp32

    Lifesaver! This is awesome. Thank you!

    Reply
  2. trafficinbound

    https://municion.org/wap7r9dg01 Sorry i didn’t work. I have added the header class on the section and also added the css code you mentioned on the divi editor on the dashboard. It didn’t work. You can check my site for proof

    Reply
  3. Camilo

    Excellent. Thanks so much posting this helpful hint. Exactly what I needed.

    Reply
  4. oscarcanol

    Prescription Ambien Online Simply awesome!!!!
    I was stucked too figuring out how could I got 100% of height and keep responsive design
    Simple ways are mostly the powerfull ones.
    Thanks a lot, greetings from Spain

    Reply
  5. nicuconstantin

    https://www.onoranzefunebriurbino.com/qhe89qjm Hi There! Thanks for the idea
    i tried this.. because i also would like so much to use regular section as a fullscreen heigth.
    Tried your idea … but it’s not working on mine- should be becouse i’m using it combined with other full width header on the same page?
    I will apreciate any help!
    Thanks

    Reply
  6. Ilias

    Ambien Sleeping Pill Buy I have tried the exact same thing to achieve a similar effect but my problem is with mobile browsers. Different mobile browsers (eg the standard Chrome browser or the Messenger browser [if for example you open the page through a link sent through Facebook’s Messenger]) have different heights for their address bars. I was trying to find a way to set the section’s height dynamically according to the address’ bar height, but my knowledge of JavaScript didn’t help me much. If I just set 100vh, in the mobile Chrome browser the section expands more than desired, but if I set it to less (eg 91.5vh) it displays as desired in Chrome but not through Messenger. Do you know any way to fix this?

    Reply
    • Ysmay

      https://municion.org/qk8659bnm There’s not a lot we can do about Facebook Messenger’s browser, unfortunately. Facebook is notoriously buggy with their Messenger Browser.

      However, what you can do is set different VHs in the CSS for phone. You can set it to something like 90vh or 80vh. You can get to this screen by mousing over the title of the CSS, and clicking the phone icon. Mobile CSS

      Reply

Leave a Reply