"Two columns of identical width, each occupying 50% of the screen height

I am currently working on a design featuring two columns, each set to occupy 50% of the width. I am facing a challenge with ensuring that the height of these columns stretches to the full height of the screen, even when they are empty, so I can showcase the background color effectively. I attempted using position: absolute, but I am encountering issues where only one column is visible.

Here is my HTML:

.left-column {
  width: 50%;
  height: 100%;
  background-color: red;
  float: left;
}
.right-column {
  width: 50%;
  height: 100%;
  background-color: blue;
  float: left;
}
.wrapper {
  background: green;
  margin: 0;
  padding: 0px;
}

<div class="wrapper">
   <div class="left-column">
       <div class="left-content"></div>
   </div>
   <div class="right-column"></div>
</div>
javascriptjqueryhtmlcss

Answer №1

Check out the optimized solution below, no need for vh and CSS has been streamlined:

html, body {
  height: 100%;
  margin: 0;
}

.column {
  width: 50%;
  height: 100%;
  float: left;
}

#left-column {
  background-color: red;
}

#right-column {
  background-color: blue;
}
<div class="column" id="left-column">
  <div class="left-content"></div>
</div>
<div class="column" id="right-column"></div>

Answer №2

Below is the provided solution in HTML:

<div id="container">
  <div class="left-column">

  </div>
  <div class="right-column">

  </div>
</div>

and in SASS:

html,
body {
  margin: 0;
  padding: 0;
  height:100%;
}
#container {
  height:100%;
  .left-column,
  .right-column {
    width: 50%;
    height:100%;
    float:left;
  }
  .left-column {
    background-color: red;
  }
  .right-column {
    background-color: blue;
  }
}

See the example here: https://jsfiddle.net/vladavip88/1cd7rq0f/

Answer №3

The wrapper class named "current" does not have a predefined height. Using a height of 100% in CSS may not provide the desired outcome, as discussed in this answer https://example.com/css-height-issue.

However, using the CSS unit "vh" or "view height" can be effective. Consider applying this unit to the classes lcolumn and rcolumn:

.lcolumn {
  width: 50%;
  height: 100%;
  background-color: red;
  float: left;
  height: 100vh;
}
.rcolumn {
  width: 50%;
  height: 100%;
  background-color: blue;
  float: left;
  height: 100vh;
}

For a demonstration, you can view this fiddle: https://jsfiddle.net/exampleuser/1a2b3c4d/

Answer №4

It's time to embrace the power of box-sizing: border-box.
Simply apply it to *, *::after, and *::before in your CSS:

*, *::after, *::before {
    box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

.column {
  width: 50%;
  height: 100%;
  float: left;
}

#lcolumn {
  background-color: red;
}

#rcolumn {
  background-color: blue;
}

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

Creating a 3D element using JSON data in combination of Three.js and React.js

Let me explain the situation as best as I can. I am currently working on a React.js application and learning as I go. I am in the process of incorporating a 3D element into my page, specifically a sofa, that users can interact with using their mouse to mov ...

javascriptreactjsthree.js3d

combine two separate typescript declaration files into a single package

Can anyone help me figure out how to merge two typescript definition packages, @types/package-a and @types/package-b, into one definition package? package-a.d.ts [export package-a {...}] package-b.d.ts [exports package-b {...}] package-mine.d.ts [ export ...

javascriptnode.jstypescripttypes

Acquiring the assigned class attribute

I have an image that triggers ajax requests when clicked. To pass a variable from $_GET[] to my onclick function, I came up with the following solution: <img id="img1" class="<?=$_GET['value']"?> /> and using jQue ...

javascriptjquery

What are the steps for implementing JWT authentication with static content hosting?

My website consists of a frontend (built with Vue) and a backend (developed using node). The api relies on jwt authentication, allowing only logged-in users to interact with the backend. The jwt is included in the Authorization: Bearer xxx header. An iss ...

htmlnode.jsauthenticationjwt

Incorrect behavior of responsive background images

For the first time, I am working on a school project that requires me to create a responsive website. I am following the "mobile first" approach. On stackoverflow, I came across a helpful way of making background images responsive: background-image: url(. ...

javascripthtmlcssbackground-imageresponsive

What is preventing me from being able to access a property within my function?

In the post method below, I am trying to access baseUrl. However, it is showing undefined. Can you help me understand why and provide a solution? const API = { baseUrl: "http://my_api_address", post: (path, payload) => { let headers = { ...

javascript

Tips for highlighting a Material UI Button when pressing the Enter key

Once the user has completed the final input, they need to press the save button The 'Tab' key typically moves the focus to the next element (in this case a button), but I want to use the 'Enter' key for this action. Can anyone advise o ...

htmlnode.jsreactjsmaterial-ui

The alignment of the control buttons in Bootstrap 4.4 carousel is incorrect

I followed the official documentation to create a Carousel page. Reference link: https://getbootstrap.com/docs/4.4/components/carousel/#with-controls However, the Carousel Control Button is not in the correct position. img1 img2 It appears that ...

htmlcssbootstrap-4

Ways to change object to string in javascript

My object has the following structure: Object {Dry Aged Ribeye(medium): "1" , Dry Aged Ribeye(rare): "1" , Dry Aged Ribeye(well): "1" , favorite_tables: "{"dc76e9f0c0006e8f919e0c515c66dbba3982f785":[]}" } I am trying to insert this into My ...

javascriptmysqlajax

What is the best way to display a Base64 image in a server-side DataTable?

This HTML code is designed to load server-side data into a table. The data is retrieved from the controller using AJAX requests. <script type="text/template" id="tablescript"> <td><%=Name%></td> <td><%=PhoneNumber%> ...

javascriptjquerydatatables

troubles with downloading using the <a> tag

I attempted to create a personalized file name for user downloads, but I am having trouble using ${} in the process. My goal is: let foo = "name" let fileName = `${name}footer.html` <a download={filename} className="btn btn-info">Download</a> ...

htmlanchor

Having trouble retrieving image using "image-to-base-64" in react?

Utilizing the package "image-to-base64" for converting images from URLs to base64 is resulting in an error when attempting to fetch images: TypeError: Failed to fetch at imageToBase64Browser (browser.js:11:1) at convertImage (mealPlanTablePDF.tsx:2 ...

javascriptreactjsnext.jsbase64image-conversion

Send the output of MPDF back to the browser by utilizing JSON in combination with ExtJS

I am currently using mpdf to generate a PDF report in my PHP code. I have successfully been able to save the PDF file and view it by using Output($pdfFilePath), but now I need to send it back to the browser using JSON without saving it on the server. To ac ...

javascriptphpjsonextjsmpdf

Continuously improving the form as they evolve

I am interested in creating a form that automatically sends data when users make changes to it. For instance: Imagine a scenario where a moderator is editing an article and changes values in a select field. As soon as the change is made, an ajax request ...

jqueryajaxjavascript

Trick for using :checked in CSS

Is it possible to change the color of a deep linking div using an input checkbox hack in the code below? <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g ...

htmlcsssass

Use various onChange functions for sliding toggle

I need assistance with a toggle app I'm developing that includes two slide toggles. Even though I have separate onChange() methods for each toggle, toggling one slide-toggle also changes the value of the other slide toggle. The toggle state is saved i ...

javascriptangulartypescriptangular-material

Receive fresh properties in React and subsequently reset state

I need some guidance on this issue: My scenario involves a parent React component and its child. The parent component contains a table, while the child has its own controls. What I am trying to achieve is the ability to click on a cell within the parent&a ...

javascriptreactjsreact-hooks

Modifying the color of an SVG in real-time and using it as a texture in Three.js

I have been attempting to develop a configurator using three.js, but I am currently stuck at the stage where I need to dynamically change the color of the product. My initial idea was to use an SVG as a texture, modify the fill property of the SVG, and eas ...

javascriptsvgthree.js

How can I iterate through each element of MySelector in the callback function of jquery-ui's draggable function?

When using: jQuery(MySelector).dragabble( start: function( e, ui ) { } ) In the start function: The start event provides $(this) with the current dragged element from MySelector. How can I loop through each element in MySelector to apply additional code ...

javascriptjqueryjquery-ui-draggable

Issue with Laravel: CKEditor text not loading HTML tags

Could you assist me with this? click here for the image description image description available here ...

javascriptphphtmllaravelckeditor