Achieving Full Height for Parallel Columns Divs with Bootstrap - A How-To Guide

I am struggling with getting two divs in parallel to have full height.

Even though I have the divs side by side, when I try to set their height:100%;, nothing happens.

What CSS properties do I need to modify to achieve this?

The goal is to create a cover page with only a cover photo, without any scroll bars, divided into two sections.

Here's my code: https://jsfiddle.net/davidlerma87/3u8v01b4/2/

Now:

Firstly: The menu bar at the top is not functioning properly.

Secondly: I want two columns below with equal full height.

Thirdly: This should also work on mobile devices.

The issue lies with the alignment of the divs. Thank you for your help!

https://i.sstatic.net/rHos2.png

To clarify, two columns within one screen but both taking up full height, including the top menu.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Kindly review this fiddle for the latest updates made in the CSS:

html,body { height:100%; }
body {
    background: url("img/GProxpt.jpg") no-repeat center center fixed;;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding:0;
    margin:0;
    color:#f1f3f5;  
    font-family: "Courier New";
    font-size:14px;
}

.container-fluid {
        background-color: rgba(0, 0, 0, 0.6);
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* width: 100%; */
    height: 100%;
    /* overflow: auto; */
}

.icon-menu {    
    margin-top:20px;
    margin-right:7em;
    float:right;
    cursor:pointer;
    width:30px; 
    height:40px;
}

.icon-menu:hover {
    width:35px; 
    height:45px;
}

.row-menu { background:red;     min-height: 100%;}

.left-side {
    width:100%;
    height:100%;
    padding-left:20px;
    margin-top:7em;
}

.left-side .title {
    color:#DCEA5F;
    font-size:50px;
}

.left-side .title .sub-title {
    font-size:35px;
}
.left-side .text-par {
    padding-top:20px;
    padding-right:0;
    font-size:20px;
}

.cols {
        /* position: absolute; */
    display: block;
    min-height: 100vh;
    margin-top: 20px;
    float: left;
}

.outer-right-side {
    position:relative;
    background:#18232E;
    margin-right:0;
    margin-top:0;
}

.outer-left-side {
    margin-bottom:0;
    position:relative;
  background:white;
}

https://jsfiddle.net/3u8v01b4/5/

Check out the updated version of the fiddle here: https://jsfiddle.net/51wwmvqx/ I have eliminated the scroll bars and implemented changes to the HTML structure.

Answer №2

Give this a shot:

.columns {
   min-height: 100vh; 
}

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

The checkbox labeled "Shipping Same as Billing" is not functioning correctly. I have included my JavaScript code below, can someone please help me identify what I am overlooking? (Only JavaScript code is provided; HTML is

I'm having trouble transferring data from a 'shipping' address to the 'billing' address section. I've included all my code, but nothing seems to copy over when the check box useShip is selected. All the HTML code is provided f ...

javascripthtml

Discover the class name within the AJAX content

I have a unique ajax response generated by a server-sided script: <div class="item-title3">Testname</div> <div class="item-level">120</div> <div class="item-binding">40</div> <div class=& ...

jqueryajax

Angular 6 - The state of the expression was altered after it was verified, different types of constructions

During the build process in debug mode with ng build, I am encountering errors in some components. However, when I switch to production mode using ng build --prod, these errors disappear. I am curious as to why this discrepancy is occurring. Error: Expre ...

javascriptangulartypescript

Middleware for enabling the Cross-Origin Resource Sharing (CORS) functionality to efficiently manage preflight

My CORS configuration is set up globally to handle credentials like this: app.use(cors({ origin: 'https://example.com', credentials: true })) However, there are certain routes where I need to allow OPTIONS requests. Following the documentation, ...

javascriptexpresscorsmiddleware

steps to overlay an image over another in bootstrap:

I am trying to place an image over another image. Here is the code I have used: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8> <meta name="viewp ...

htmlcsstwitter-bootstrap

Error in compiled.php on line 7772: Laravel throwing a RuntimeException when sending HTTP requests from Angular

Hey there, I've been encountering an error intermittently while using Angular $http methods with a Laravel API. Can someone please explain what this error means and suggest potential solutions? I've shared the error log on CodePen for easier refe ...

javascriptangularjslaravelhttplaravel-5

What is the best method to retrieve information from two tables on a webpage that have identical classes?

I am facing a challenge in retrieving or selecting data from two different tables that share the same class. My attempts to access this information using 'soup.find_all' have proven to be difficult due to the formatting of the data. There are m ...

pythonhtmlseleniumselenium-webdriverbeautifulsoup

Hide the button when you're not actively moving the mouse, and show it when you start moving it

How can I make my fixed positioned button only visible when the mouse is moved, and otherwise hidden? ...

javascripthtmlcss

Having trouble figuring out what is causing non-serializable error in Redux (Redux error)

Initially, my react-native application was functioning smoothly and this particular page (screen) had been developed and working perfectly. However, out of the blue, it has started to encounter an error related to non-serializable data in the 'save_re ...

javascriptreactjsreact-nativereduxexpo

Converting a table into JSON format

I'm working on developing a live application that will showcase data in a table format like the one below: Machine Production Scanned Delta Mach 1 2500 1000 1500 Mach 2 1500 1300 200 Mach 3 6500 5000 1500 Mac ...

pythonhtmlsqljson

Choosing an input option after the second ajax call is finished with JQuery

I'm fetching data from MySQL to PHP using AJAX. I am trying to implement an edit feature on my website within a modal window. The select input with options (subcategories) is loaded via AJAX after the radio input categories are loaded by a previous AJ ...

phpjqueryajax

Retrieve information from a database using PHP and assign it to a JavaScript variable

I need to display a Google map marker on my website, with the latitude and longitude values coming from the database in the columns labeled latitude and longitude. Here is the initial JavaScript code: var map; function initialize() { map = new GMaps( ...

javascriptphpdatabasegoogle-mapsmysqli

Encountered a problem during the installation of tensorflowjs for node | Received an error: Command failed: node-pre-gyp install

While attempting to install @tensorflow/tfjs-node, I encountered the following error: Command failed: node-pre-gyp install --fallback-to-build. Is there a solution to resolve this issue? Below is the complete log: npm ERR! code 1 npm ERR! path E:\ ...

javascripttensorflownpmnpm-installtensorflow.js

The setState function in the useState hook is being called only one time when triggered by an EventListener

Within my functional component, I am utilizing the useState hook to store state. When the user reaches the bottom of the page, I want to dynamically add content. To achieve this, I implemented an EventListener for 'scroll' within a useEffect hook ...

javascriptreactjsreact-hooksnext.jsevent-listener

What is the process for retrieving a value from a Django view?

Would it be feasible to call a view from a JavaScript file using Ajax and have the view only return a specific value known as "this"? However, despite attempting this, an error occurs stating that the view did not provide an HttpResponse object, but instea ...

javascriptajax

Here's the secret to completely getting rid of emoji as symbols

I'm facing an issue with using a regular symbol (specifically the up-right-arrow) in a Wordpress menu. When I paste the symbol character into the required field, it shows up correctly on desktop but on my iPhone, it displays as an emoji rather than th ...

htmlwordpresshexsymbolsemoji

nodemailer failed to authenticate login: 535 Authentication Error

I'm encountering a 535 Authentication Failed error when trying to utilize the nodemailer npm package in my node application for sending emails through the contact page. My email and password are correct, so I'm unsure why this issue is arising. v ...

javascriptnode.jsemailservernodemailer

Access the file and execute JavaScript code concurrently

Can I simultaneously link to a file as noticias.php and call a JavaScript function? <a href="javascript:toggleDiv('novidades');" class="linktriangulo"></a> The toggleDiv function in my noticias.php file: function toggleDiv(divId) { ...

javascripthtmlhyperlink

"Implementing real-time updates for checkboxes using AJAX with PHP and

This is my modal <div class="modal fade bs-example-modal-lg" id="exampleModal<?php echo $row['t_id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel<?php echo $row['t_id'] ?>"> <div class="mo ...

phpjquerymysqlajax

What components does Flex have? And how do they compare to HTML elements?

In the realm of flexibility, creating and reusing components can be a powerful tool. In this case, the ability to code a component once, style it, and then reuse it in various instances is invaluable. The beauty lies in the independence of each copy produc ...

jqueryhtmlcomponentswebcode-separation