Creating two full-height columns in Twitter Bootstrap 4 without the need for scrolling

I'm attempting to create a two-column full-height layout using bootstrap 4. My goal is to achieve the following structure:

  +-------------------------------------------------+
  | Logo                Header          Another Logo| - height 10 %
  +----------------------------------+--------------+                 -
  |                                  |   Content 2  | - height 10 %    |
  |                                  |--------------|                  |
  |                                  |              |                  |
  |                                  |     width    |                  |
  |    Content 1 - width 70%         |      30%     | - height 60%     | - total height 90%
  |                                  |   Content 3  |                  |
  |                                  |              |                  |
  |                                  +--------------+                  |
  |                                  |   Content 4  | - height 20%     |
  +----------------------------------+--------------+                 -

All elements should fit without requiring scrolling on the screen. I aim to adjust the widths and heights dynamically based on screen resolution. This means that I want to avoid any need for scrolling.

Please note that this design is specifically for desktop view, where the width is greater than 768 px. Therefore, mobile view considerations are not necessary.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Bootstrap 4 classes are the key to success in this scenario

html, body, .project {height: 100%}
* {box-sizing: border-box}
.project div {border:1px solid #eee}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="project text-center">
    <div class="d-flex justify-content-between" style="height: 10%">
        <div>logo</div>
        <div>Header</div>
        <div>Another logo</div>
    </div>

    <div class="d-flex" style="height:90%">
        <div class="mb-auto mt-auto" style="min-width:70%;">Content 1 - width 70% - Always center at horizontal and vertical</div>
        <div class="d-flex flex-column" style="min-width:30%;">
            <div class="mb-auto" style="height:10%">Content 2 - height 10%</div>
            <div style="height:60%">Content 3 - width 30% - height 60%</div>
            <div class="mt-auto" style="height:20%">Content 4 - height 20%</div>
        </div>
    </div>

</div>

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

Angular4 is throwing an error stating that the center element in the HTML is an undefined function

Is there an alternative tag that can be used instead of <center> <\center> in angular4, as it indicates that center is not a recognized function? ...

javascripthtmlangular

Creating a stunning image reveal animation using GSAP and clip-path within a React environment

When attempting to create an animation for revealing an image using GSAP and the clip-path property within a Component, I encountered an issue. The animation works perfectly when using the first clip-path value, but as soon as I switch to the other one, th ...

cssreactjsgsapclip-path

How can I ensure that the HTML I retrieve with $http in Angular is displayed as actual HTML and not just plain text?

I've been struggling with this issue for quite some time. Essentially, I am using a $http.post method in Angular to send an email address and message to post.php. The post.php script then outputs text based on the result of the mail() function. Howev ...

javascriptphphtmlangularjs

I'm looking for a way to add an onclick event to every element created by Vue.js through a "v-for" loop in order to toggle the visibility of its inner content

My Vue data consists of: data: function() { return { results: { "items": [ { "id": "770c257b-7ded-437c-99b5-3b8953b5be3a", "name": "Gsbssbb", "price": 9559, "colour": { ...

javascripthtmlloopsvue.jsvuejs2

"Utilize Selenium to navigate and select a menu option with a

In my dropdown menu, I am trying to use Selenium to move the mouse to the Documentation menu item and click on the App Configuration option within it. The mouse hover function is working properly, but I am unable to click on the App Configuration element. ...

javajavascripthtmlselenium

Is it possible to rotate an image with a random angle when hovering in Angular?

I'm currently working on a photo gallery project and my goal is to have the images rotate when hovered over. However, I am experiencing difficulties in passing values from TypeScript into the CSS. HTML <div class="back"> <div cl ...

javascripthtmlcssangulartypescript

What is the process of calculating the difference between two time values in PHP?

I have searched everywhere online and tried multiple methods over the past couple of days, but still can't seem to achieve the desired result. My goal is to subtract two different times, for example 22:00:00 - 00:30:00 = 21:30:00 $hourToEatLastMeal = ...

javascriptphphtmlmysql

The dropdown list is nowhere to be found in the page source when using Selenium

Currently, I am engaged in web scraping using Selenium. Successfully locating the input box and entering ID numbers is no issue. Yet, a roadblock presents itself - there is no submit button linked to the search bar. Once the numbers are inputted, the box a ...

pythonhtmlseleniumweb-scrapingmicrosoft-edge

Filtering posts in Angular with the use of pipes

I've been attempting to use pipes in Angular to filter posts from a table, but I keep running into this error on the console: core.js:12689 Can't bind to 'ngForFilter' since it isn't a known property of 'a'. I believe th ...

htmlangularpipengfor

Stop tooltips from appearing on hyperlinks in Internet Explorer

Is there a solution to disabling the pesky tooltips that appear in the bottom left corner of IE when hovering over links? Alternatively, is there a method to customize the text that appears instead of the default tooltip when hovering over a link (I attem ...

htmlinternet-explorertooltip

Creating a single div to influence the height of surrounding divs

Here is a fiddle you can check out: http://jsfiddle.net/thiswolf/RGe24/3/ to see the image div and the orange and middle divs stretch to match its height without padding the orange box towards the bottom. Here is the HTML code: <section class="les_hea ...

htmlcss

Enlargen div or unordered list according to content exceeding limits

What is the best way to ensure a div expands when it contains a lot of content? Code Example (HTML): <div class="content"> Content goes here <br /> Content goes here <br /> Content goes here <br /> Content goes her ...

jqueryhtmlcssxhtml

I'm having trouble with the colors not displaying correctly on my NextJS Tailwind navbar

I've encountered an issue with my navbar where none of the specified colors are being displayed. The code snippet for the navbar is as follows: Codes: 'use client' import Head from 'next/head'; import Link from 'next/link&apo ...

javascriptcssreactjsnext.jstailwind-css

Bootstrap 4 Vertical Timeline Layout Showing Uneven Columns Due to Large Margins

I'm currently working on my very first website and trying to implement a vertical timeline using Bootstrap 4. My goal is to have the timeline bar situated between two columns. However, I'm encountering an issue where I can't align text in th ...

htmlcssbootstrap-4timelinemargins

Generating a dynamic list by utilizing database data once a button has been clicked

I'm looking to create a feature on my website where clicking on a button will populate a paragraph below it with data retrieved from a database query containing two columns. The first column provides the text for a list, while the second column contai ...

phpjavascripthtmlajax

Is there a way to create a table using Jquery based on user input?

I'm trying to create a table for user inputs and classify them, but I'm having issues with the layout. When multiple inputs are added, they display in an awkward way. I've experimented with different methods, but the problem remains. Can som ...

javascriptjqueryhtmlhtml-tableuser-input

What is the equivalent of window.onload in emscripten?

In my HTML file, I have been copying and pasting the Emscripten generated code into the <script></script> region. However, the browsers tend to execute the Emscripten code before the entire HTML file has been processed. This causes issues if ...

javascripthtmlcemscripten

Explore by the anchor tag

I've recently implemented a search bar utilizing Bootstrap. This is the code for the search bar: <div class="md-form mt-0"> <input class="form-control" id="myInput" type="text" placeholder="Sear ...

javascripthtmljquerybootstrap-4

What could be causing the inability to apply CSS to customize form content?

I've just wrapped up creating a sign-up form, but I seem to be having trouble utilizing display:inline-block. What could possibly be the issue? The internal elements are stubbornly glued together and refuse to budge. (On another note, any suggestio ...

javascripthtmlcssreactjs

Tips for keeping a dynamic height div in place without affecting surrounding elements

HTML: <div id="autocomplete" hidden></div> <input type = "button" id = "search" value = "Search"> The autocomplete div contains dynamically generated input tags created by jQuery. These input tags cause the button to be shifted down the ...

css