Tips on expanding a div to cover the entire page

I am designing a web page with two columns positioned next to each other that will occupy the entire width of the page. Each column should take up 50% of the available width without any margins or padding on either side, and they should stretch to fill 100% of the height based on the screen resolution.

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body>* {
  flex-shrink: 0;
}

.login-column {
  float: left;
  width: 50%;
  background-color: #F4F6F9;
  margin: 0;
}

.news-column {
  float: left;
  width: 50%;
  background-color: #75BFF0;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
  /* Standard syntax (must be last) */
  margin: 0;
  flex-grow: 1;
}
<div class="row">
  <div class="login-column">
    <h1>Login</h1>
  </div>
  <div class="news-column">
    <h1>News</h1>
  </div>
</div>

Currently, the divs have no top, left, or right padding or margins; however, the background color only extends to the end of the text content. I aim for the background to reach all the way to the bottom of the page, eliminating the need for a scrollbar.

In terms of using elements, I'm utilizing divs in my layout. Is this still best practice or would it be more appropriate to incorporate newer HTML5 semantic elements like article, aside, etc?

htmlcss

Answer №1

If you want a DIV to fill the entire page in terms of height, make sure to include this CSS code:

CSS

div {
height: 100vh;}

You can find more details in this helpful post: How to make a div 100% height of the browser window

Answer №2

Try setting the height of your columns to 100vh instead of using floats. Don't forget to add this code in the head section of your page: 

<meta name="viewport" content="width=device-width, initial-scale=1">

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body>* {
  flex-shrink: 0;
}
.row {
  display: flex;
}
.login-column {
  flex: 0 0 50%;
  background-color: #F4F6F9;
  margin: 0;
  height: 100vh;
}

.news-column {
  flex: 0 0 50%;
  background-color: #75BFF0;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
  /* Standard syntax (must be last) */
  margin: 0;
  height: 100vh;
}
<div class="row">
  <div class="login-column">
    <h1>Login</h1>
  </div>
  <div class="news-column">
    <h1>News</h1>
  </div>
</div>

Answer №3

To add height to div elements, you just need to specify it in the class. .login-column {height: 100%;} .login-column {height: 100%;}

Answer №4

Avoid using floats and position: absolute unless you are confident in your knowledge. Consider utilizing a flex container with max-height for the columns to fill the entire screen height without causing overflow issues.

It's also important to note the use of class syntax to efficiently reuse CSS code.

body {
  margin: 0;
  padding: 0;
}

.flex-container {
  width: 100%;
  display: flex;
}

section {
  min-height: 100vh;
  flex-basis: 50%;
  box-sizing: border-box; /* Includes padding in width calculation */
  padding: 1rem;
}

section.left {
  background-color: #F4F6F9;
}

section.right {
  background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
}
<body>
  <div class="flex-container">
    <section class="left column">
      Content here
    </section>

    <section class="right column">
      More content here
    </section>
  </div>
</body>

Answer №5

Have you attempted to design a content container that includes multiple columns? Here is a possible solution:

* {
      padding: 0;
      margin: 0;
    }
    
    body, html {
    height: 100%;
    }
    
    .columns-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .login-column {
      display: flex
      background-color: #F4F6F9;
      margin: 0;
      width: 50%;
    }

   .news-column {
     display:flex;
     background-color: blue;
     margin: 0;
     width: 50%;
     height: 100%;
   }
<div class="columns-container ">
    <div class="login-column">
        <h1>Login</h1>
    </div>
    <div class="news-column">
        <h1>News</h1>
    </div>
</div>

Answer №6

When it comes to utilizing div, article, and aside elements in HTML coding, their main purpose is to enhance semantic structure for Search Engine Optimization purposes and facilitate the understanding of code flow for developers. While I won't directly address your specific question since it has been answered before, feel free to reach out if you need further clarification :)

Just a quick note: It's perfectly acceptable to use div in your situation, so no need to worry.

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

Unusual Login Problem Involving Ajax, jQuery, and PHP

My login header has two dynamic links: login/register and profile/logout. I previously used a PHP class function to check if the user was logged in and display the appropriate links, which worked well. Recently, I switched to an Ajax login to avoid page ...

phpjqueryhtmlajax

What is the best way to horizontally align a div container that houses floating divs using CSS?

I am currently working on a layout that involves a main div container, div#title-box, being vertically and horizontally centered on the page. Inside this main container, I need three additional div containers: div#logo, div#title, and div#subtitle (see cod ...

htmlcss

Looking for assistance in identifying the cause of CSS malfunction in Internet Explorer

I am encountering some challenges with the CSS on my website. I developed the site without considering Internet Explorer, and now that I am trying to address IE bugs, it feels like a daunting task. How do you approach debugging in situations like these? ...

css

Tips for setting a value in $scope within an ng-repeat loop in AngularJS

I'm currently facing an issue with ng-repeat in angularJS, specifically on how to assign a value in $scope inside ng-repeat. Here is my scenario: I have a JSON file that contains all the data structured like this: [ {BookID:1,Chapter:1,ContentID:1, ...

javascripthtmlangularjs

Make sure to employ Bootstrap's justify-content-between and stack-to-horizontal col correctly

I am currently working on a responsive form that contains 1 label, 1 input field, and 5 buttons. Both the buttons and the input field are located under col-8. The positioning I aim for the buttons is as follows: They should start below and align with ...

htmlcssbootstrap-4responsive-designfrontend

Changing Meteor Template to a Node.js/AngularJS Conversion

My current website is built with Meteor using templates structured like this: <body> {{>section1}} {{>section2}} {{>section3}} </body> <template name="section1"> <h1>This is Section 1</h1> </template> ...

htmlangularjsnode.jstemplatesmeteor

I am curious as to why Facebook likes to keep HTML code hidden within HTML comments

While exploring the depths of the Facebook source code, I made a curious discovery. By visiting and delving into the source code, if you use command/ctrl F to search for: <code class="hidden_elem" You will notice that in the third or fourth instance, ...

htmlajaxfacebook

Scrolling text blocks on mobile devices

When viewing the website on a desktop, everything works perfectly. However, when accessing it on a mobile device and trying to scroll down, only the text moves while the page remains stationary. The website utilizes skrollr core for animations. I have alre ...

javascripthtmlcssanimationscroll

Can the custom scrollbar CSS property of a DOM node be located using JavaScript?

Is it possible to find a CSS property of a pseudo-class (like scrollbar pseudoclasses in Chrome) for an element styled with it? Here's an example: <body><div #a></div></body> <style> #a::-webkit-scrollbar { width: ...

javascriptcss

How can I incorporate random variables and functions into an if-else function when using Jquery to make #divId droppable?

I have most of my code working as I want it to, except for some basic CSS adjustments that need to be made. In a specific part of my code where I am using $("#divId").droppable({over: function(), I want to add 2 other functions and have one of them execute ...

jqueryhtml

Manage the input in the text field using a checkbox

Hello, I currently have 2 text fields and 2 checkboxes: <input type="checkbox" id="class1"> <input type="checkbox" id="class2"> <div id="hidden"> <input type="text" id="valclass1"> <input type="text" id="valclass2"> </div ...

htmltextfieldshow-hide

Tips on centering elements vertically using Zurb Foundation

I'm trying to create a login form with the username and password fields centered in the middle of the screen using the Zurb Foundation package. Unfortunately, I'm struggling to get things aligned vertically. This is the code I have: <!DOCTYP ...

cssformattingcenteringzurb-foundation

Struggling to import bourbon files into my website - need help displaying the tree structure in a post

I find that my problem is best illustrated with a picture Please refer to the image for further details My issue seems straightforward, but I am struggling to get my main.sass file to import all the other sass files in order to display the bourbon assets ...

cssbourbon

Adjusting Bootstrap CSS Styles

After recently installing bootstrap 3.0 on my website and experimenting with it, I have a few questions. I am looking to customize certain aspects of the jumbotron (and other classes) in my personal .css file named "mycss.css". Here is the code I have add ...

htmlcsstwitter-bootstrap

Modifying an image's src using JavaScript is not possible

I'm attempting to modify the source of an image using a JavaScript function, but it doesn't seem to be working. The function is being executed within a mounted() method in Framework7. Here is my current setup: HTML: <div> <span> &l ...

javascripthtmlhtml-framework-7

Javascript does not execute properly in Google Apps Script

Encountering issues while attempting to execute the code provided in Google app script. // 1.foldername = Folder name | 3.templateId = ID of the template to use // 2.SheetId = ID of spreadsheet to use. | 4.rootFolder = ID of the root fold ...

javascripthtmlgoogle-apps-scriptgoogle-apps

JavaScript continues to malfunction

I've been working on a website that includes a page where users answer questions and based on their selections, they receive one of two possible answers. If "yes" is chosen, it indicates failure, while selecting all five as "no" results in a passing g ...

javascripthtmlformsradio-button

I am struggling to store a response from a request using axios in a state variable in React.js using Next.js

I'm currently tackling an issue while working with React.js. Here is the problem I am facing: import axios from "axios"; export default function Home() { const [products, setProducts] = useState([]); const ax = axios.create({ headers ...

htmlreactjsaxiosnext.jsstate

Problem with the content-editable attribute

My goal is to make each div with the class .edit editable by adding the contenteditable property: $(document).ready(function() { $(".edit").attr("contenteditable", "true"); }); However, after applying this, I found that clicking on a div with content ...

javascriptjqueryhtml

What is the best way to incorporate Interpolation in order to calculate the width of an LI element?

Is there a way to apply the same value of {{getCount(userObj.assigned_to, 'Applicable')}} + px to the width of an LI element with a background color? When I try to add it to style.width, I encounter an error. Template parse errors: Parser Error: ...

htmlcssangularinterpolation