What is the best way to maximize vertical space in every element on a page?

How can I achieve a layout similar to the image shown? I want three distinct sections: a navigation bar fixed at the bottom, and left and right sides each taking up 50% of the screen. Additionally, all boxes on the left side should have equal height. I am working with React, so the style implementation is a bit different.

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

This is my current code:

body,
html {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

div {
  overflow: hidden;
}

.box {
  min-height: 100px;
  min-width: 100px;
  transition: transform .6s;
}


.color {

  background-color:  rgba(58, 140, 190, 255);
}





.icon-white {
  color: white;
}

.card-text {
  color: white;

}

.title {
  color: rgba(255, 255, 255, 0.418);
  font: 1.5vw sans-serif;
}
   
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63010c0c17101711021323564d514d53">[email protected]</a>/dist/css/bootstrap.min.css"
  integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
   <div class="container-flex m-3">


<!-- Additional code removed for brevity -->

        </div>
      </div>
    </div>

htmlcssreactjsbootstrap-5

Answer №1

Utilize the vh unit to divide the screen in half :

  • Assign 50vh to your navigation element and the "left and right side elements" row, or split the virtual height between two values like 90vh and 10vh, or for a more precise layout, if your navigation is 34px, set the top row to be calc(100vh - 34px)
  • Add 
    display: flex; flex-direction: column; justify-content: space-between
    to your left column element to utilize all necessary space. Based on your design, this approach should work well. Alternatively, assign height: 100%; to all child rows elements for the blue boxes to occupy all available space.

The decision to use bootstrap classes or custom CSS is up to you

Answer №2

If you want to implement this using bootstrap, make sure that your HTML, body tag, and the div where react is mounted all have a height: 100%.

Check out Codesandbox for an example: https://codesandbox.io/s/wonderful-leftpad-sxold7?file=/src/App.js:0-4551



    <div class="d-flex m-3 flex-column h-100">
    <div class="d-flex flex-row col overflow-auto">
      <div class="col">
        <div class="d-flex justify-content-around mb-3">
          <div class="col-3">

            <div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
              <div>
                <h4 class=" title">TEXT</h4>
                <h5 class=" card-text">TEXT</h5>
              </div>
              <div>
                <h5 class=" card-text">ICON</h5>
              </div>
            </div>
          </div>
          <div class="col-3">
            <div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
              <div>
                <h4 class=" title">LONG TEXT</h4>
                <h5 class=" card-text">TEXT</h5>
              </div>
              <div>
                <h5 class=" card-text">ICON</h5>
              </div>
            </div>
          </div>
          <div class="col-3">
            <div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
              <div>
                <h4 class=" title">TEXT</h4>
                <h5 class=" card-text">TEXT</h5>
              </div>
              <div>
                <h5 class=" card-text">ICON</h5>
              </div>
            </div>
          </div>
        </div>
        <div class=" d-flex justify-content-around mb-3">

          <div class="col-3">
            <div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
              <div>
                <h5 class=" title text-uppercase">TEXT</h5>
                <h4 class=" card-text text-capitalize">TEXT</h4>
              </div>
              <div>
                <h5 class=" card-text">ICON</h5>
              </div>
            </div>
          </div>
          <div class="col-3">
            <div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
              <div>
                <h5 class=" title text-uppercase">TEXT</h5>
                <h4 class=" card-text">TEXT</h4>
              </div>
              <div>
                <h5 class=" card-text">ICON</h5>
              </div>
            </div>
          </div>
          <div class="col-3">
            <div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
              <div>
                <h5 class=" title text-uppercase">TEXT</h5>
                <h4 class=" card-text">TEXT</h4>
              </div>
              <div>
                <h5 class=" card-text">ICON</h5>
              </div>
            </div>
          </div>
        </div>
        <div class=" d-flex justify-content-around  mb-3">

          <div class="col-3">
            <div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
              <div>
                <h5 class=" title text-uppercase">TEXT</h5>
                <h4 class=" card-text text-capitalize">TEXT</h4>
              </div>
              <div>
                <h5 class=" card-text">ICON</h5>
              </div>
            </div>
          </div>
          <div class="col-3">
            <div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
              <div>
                <h5 class=" title text-uppercase">TEXT</h5>
                <h4 class=" card-text">LONG LONG TEXT</h4>
              </div>
              <div>
                <h5 class=" card-text">ICON</h5>
              </div>

            </div>
          </div>
          <div class="col-3">
            <div class="h-100 color p-3 box red" style={{ borderRadius: '5%' }}>
              <div>
                <h5 class=" title text-uppercase">TEXT</h5>
                <h4 class=" card-text">TEXT</h4>
              </div>
              <div>
                <h5 class=" card-text">ICON</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class=" color p-3 box red" style={{ borderRadius: '5%' }}>
          <div>
            <h4 class=" title">TEXT</h4>
          </div>
          <div>
            <h5 class=" card-text">ICON</h5>
          </div>
        </div>
      </div>
    </div>
    <div class="col bg-dark" style={{flex: '0 0 150px'}}>
      <h3 class="text-success">BOTTOM NAV BAR</h3>
    </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

What is the best way to retrieve the value of a Select element that is rendered dynamically through the onChange method?

My Select component from Material UI looks like this: <FormControl className='select-form'> <InputLabel id="demo-simple-select-outlined-label">Choose User</InputLabel> <Select labelId="demo-simp ...

reactjsselectreact-reduxmaterial-ui

What are some ways to display alternative content when JavaScript is not enabled?

When JavaScript is disabled, I want to display an entirely different set of content. While I am aware that the <noscript> tag can be used for this purpose, how can I ensure that the remaining page elements are hidden as well? Any suggestions would b ...

javascriptjqueryhtmlcss

Cordova: Opening App through a Website Link Click

Embarking on my app development journey, I recently dived into creating an Android app with Cordova. However, I found myself stuck at a particular issue: In the sign-up process, users receive an email containing an activation link to click and confirm the ...

androidhtmlcordova

Locate an element that is nested within a "concat(" XPATH using Selenium

Embarking on my inaugural project as a Python developer, I am currently in the process of web scraping a retail website. The challenge lies in the fact that the site features infinite scrolling functionality, although at times instead of triggering the inf ...

pythoncssseleniumxpathscreen-scraping

Is server-side rendering necessary for `browserHistory` in React Router?

I am a beginner in the world of React and currently diving into the complexities of routing. While hashHistory (/#/paths/like/this) proves to be functional, browserHistory (/paths/like/this) appears much cleaner. However, I noticed that when reopening URLs ...

javascriptreactjsreduxfrontendflux

Customize Bootstrap 4's .btn-link style to include a smooth transition for under

Recently, I've been working on customizing Bootstrap 4's .btn-link by adding a special hover effect - a line that smoothly transitions from left to right beneath the link when the mouse hovers over it. Although things are mostly going according ...

cssbootstrap-4

The words spill across the navigation bar

I am facing an issue with my navbar where the text overflows and creates extra space due to a white background. I have tried resolving this for a while but haven't been successful. I need help from someone knowledgeable in this area. Here are some im ...

javascripthtmlbootstrap-5

Issues with the performance of the Responsive Image Slider

Having trouble with the carousel on my website. The Navigation Bar is working, but the image slider isn't showing up despite trying multiple approaches. Bootstrap is properly linked and I've read through the documentation for the Bootstrap Carous ...

htmlcsstwitter-bootstrapbootstrap-4

Fill the center circle with GoJs background

Is there a specific way to paint the center circle only? I have provided an example project below. ...

javascripthtmlgojs

Troubleshooting in ReactJS and NodeJS: Understanding the "Pass --update-binary to reinstall or --build-from-source to recompile" error

After moving a ReactJS + NodeJS project from one computer to another, I attempted to install dependencies by running npm install in the terminal. However, I received the following response: > [email protected] install /Users/Joshua/Projects/practi ...

javascriptnode.jsreactjsnpmnpm-install

The attempt to convert to ObjectId was not successful for the value located at the specified path "id" in the model

Encountered an Error: Cast to ObjectId failed for value "hist" at path "_id" for model "books" Greetings! ISSUE: Attempting to utilize other models within another model, specifically two models within one. The models in question are: models: { ...

node.jsreactjsmongodbmongoose

Creating a professional HTML/CSS signature for optimal performance in Outlook 2016

For my email signature, I currently have an HTML coded design that includes a 400x415 dashed line with specific color specifications. However, Outlook Express 2016 is unable to display this element properly. Despite using inline CSS, it appears that CSS d ...

htmlcssemailsignatureoutlook-2016

The Firebase Login functionality is experiencing issues on the deployed Next.js application, although it functions correctly when running locally

After developing a Next.js app with Firebase Google login functionality, everything was running smoothly in my local environment. However, upon deploying it to Railway and Vercel, the login feature seemed to malfunction. Whenever a user attempted to click ...

reactjsnext.jsfirebase-authenticationvercelrailway

Notify the user immediately if an HTML template is stolen using Jquery and PHP

After uploading an HTML template to themeforest, I discovered that some websites were giving away the full source code for free. Since HTML is easy to copy, obfuscation doesn't solve the issue. Is there a way to use JQuery to alert me if someone hosts ...

phpjqueryhtml

Why am I encountering this rendering issue when passing data to the ReactTable component?

The following code snippet represents the parent component containing an array of columns and data. const TransactionTable = () => { const columns = useMemo( () => [ { Header: 'DATE/TIME', accessor: &apos ...

reactjstypescriptreact-hooksmaterial-uireact-table

Using CSS to style in React is throwing an error: "TypeError: Cannot read property 'image' of undefined"

Hi there! I'm fairly new to web development and React, and I could really use some guidance with my current project. I've been working on pulling data from a local file and trying to display it upon click. Everything goes smoothly until I start ...

reactjs

How can I display pure HTML in a Pyramid view?

I am completely new to Pyramid (and relatively inexperienced with web frameworks in general). My goal is to reach a point where I can retrieve raw HTML from a view in order to format data fetched from my mongoDB database. The __init__.py in my Pyramid pr ...

pythonhtmlmongodbpyramid

Struggles with customizing Material UI styles

Struggling with overriding the padding in this specific scenario. I attempted to utilize .MuiTableCell-root, but still no luck updating the padding. Inspecting Material UI styles using developer tools .MuiTableCell-root { display: table-cell; padd ...

reactjsmaterial-ui

Opinions on crafting a new gadget?

I will only provide each website interested in my widget with the code to copy and paste once. It is crucial that the code is future-proof. After much consideration, this is the widget code I have developed: <script type="text/javascript" src="http:/ ...

javascripthtmlwidget

auto-scrolling webpage as elements come into view

Here is some jQuery code I have: $(".col-md-12").hide(); $(".button-div").hide(); $(".featurette-divider").hide(); $(".footer").hide(); $(".first").fadeIn(1000); $(".second").delay(900).fadeIn(1000); $(".third").delay(1800).fadeIn(1000); $(".fourth").dela ...

javascriptjqueryhtmlcss