Tips on creating a responsive div element within the viewport?

I have a variety of nested div elements within a parent div, set up like this:

#mycontent > div {
  width: 14.28%;
}
<div id="myheader">some header content</div>

<div class="container" id="mycontent">
  <div class="outerdiv" id="row1">
    <div class="cells">Sun</div>
    <div class="cells">Mon</div>
    <div class="cells">Tue</div>
    <div class="cells">Wed</div>
    <div class="cells">Thu</div>
    <div class="cells">Fri</div>
    <div class="cells">Sat</div>
  </div>

  <div class="outerdiv" id="row6">
    <div class="cells"></div>
    <div class="cells"></div>
    <div class="cells"></div>
    <div class="cells"></div>
    <div class="cells"></div>
    <div class="cells"></div>
    <div class="cells"></div>
  </div>
</div>

<div id="mydetails">extra contents here</div>

What is the best way to style this structure so that both #myheader and #mycontent fill 100% of the original viewport, while keeping the #mydetails at the bottom? Can this even be achieved?

htmlcss

Answer №1

My suggestion is to avoid using width: 14.28%. It's best to remove it so that your .outerdiv items will automatically adjust inside the div, regardless of how many there are.

#myheader, 
#mycontent,
.outerdiv {
    width: 100%;
}

.outerdiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.outerdiv > div {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: .75rem;
    text-align: center;
}

Answer №2

.container {
  display: grid;
  height: 100%;
}

Give this a try, it should work like a charm.

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

Is there a way to change an HTML document into a Word file?

I am looking for recommendations on libraries that can help me save HTML documents in memory as Word .DOC files. Any suggestions for both closed and open source options are welcome. Additionally, could someone provide links to these libraries based on the ...

htmlms-word

Displaying URLs stylishly with Pills Bootstrap

When a pill is selected from the list, I need to display a specific URL that can be used elsewhere. However, there is an href="#pills-something" attribute that directs to an ID below. I am looking for something like: mysite.com/myspecificpill or ...

javascripthtmljquerycssbootstrap-4

What is the best way to position a Button on the far right of an MUI AppBar?

I'm struggling to grasp the concept of aligning items in MUI. Here is my code snippet: class SignUpForm extends React.Component { render() { return ( <Button sx={{ justifyContent: "flex-end" }} colo ...

cssreactjsmaterial-ui

An oversized image creates additional room

I currently have a board that consists of 3 blocks, with each block containing a grid of 25 squares. These squares are 40x40px in size with a margin around them, resulting in an overall size of 220px x 220px. Each square also has some space above and below ...

htmlcss

Issue with displaying background image in h2 element

Consider me a novice who learns primarily through trial and error. Unfortunately, I'm stuck on this particular issue. My goal is to have an image appear behind the h2 text on my homepage, but despite my efforts, I can't seem to make it work. You ...

cssimagewordpressbackground-image

Pause jQuery at the conclusion and head back to the beginning

As a beginner in the world of jQuery, I am eager to create a slider for my website. My goal is to design a slideshow that can loop infinitely with simplicity. Should I manually count the number of <li> elements or images, calculate their width, and ...

javascriptjqueryhtmlcssslideshow

What is the most effective method for creating a dark background with light text in Bootstrap without using SASS?

I recently created a new website using Bootstrap 5 and set the background color to black (#000000) by adding some CSS styling. However, I noticed that this change had unintended consequences on the appearance of various elements such as drop shadows, modal ...

csslessbootstrap-5dark-theme

Trouble loading antd's less styles

In my NextJs project, I have the following file structure: -pages -_app.tsx -app -styles -antdstyles.less Within _app.tsx, I am attempting to import @styles/andstyles.less, which simply imports antd styles like this: @import '~antd/di ...

cssreactjsnext.jslessantd

Change icons in Ionic 5 when selecting a tab

How can I change my tab icons to outline when not selected and filled when selected? The Ionic 5 Tabs documentation mentions a getSelected() method, but lacks examples on its usage. I plan to utilize the ionTabsDidChange event to detect tab clicks, then ...

htmlangulartypescriptionic-frameworkionic5

Storing information when an object is indexed in a for loop, to be retrieved later when

My JavaScript code includes an AJAX call that takes user input from a form and uses it to search for a JSON object. The matching objects are then displayed in a datalist successfully. Everything is working well so far, but now I want to extract specific f ...

javascripthtmljsonajax

The app is opening the index.html file instead of the expected index.jsx file

After creating a page with React.jsx, I encountered an issue where my page was initially opening index.jsx upon running npm start. However, when I deleted and then restored the index.html file to "public", the page started opening index.html instead. This ...

htmlreactjsnpmjsxdelete-file

Typography Addition on Flexslider

I am currently working with flexslider and trying to incorporate a unique text overlay on each individual slide, but so far I have been unsuccessful. <div class="flexslider"> <ul class="slides"> <li> <img src ...

javascripthtmlflexslider

Tips for saving the visibility status of a <div> in your browser bookmarks?

Currently, I am in the process of developing a single webpage (index.html). The navigation bar at the top includes links to hash references (DIV IDs). If JavaScript is enabled, clicking on these links triggers a JavaScript function with the onclick attribu ...

javascripthtmlcssbrowserbrowser-history

Emails can be sent through a form without the need for refreshing

I am currently working on a webpage that utilizes parallax scrolling, and the contact box is located in the last section. However, I encountered an issue where using a simple HTML + PHP contact box would cause the page to refresh back to the first section ...

javascriptphpjqueryhtml

Unable to get the Gtranslate function to function properly within the drop-down menu

Currently, I am using Gtranslate.io languages on my website with flags displayed without a drop-down menu. Everything is running smoothly but now I am looking to enhance the user experience by placing the flags inside a drop-down list. I want English to ...

javascriptjqueryhtmlcss

Using Jquery's closest technique to target a class located outside of the parent div

I am having trouble accessing a class outside of its parent div $(document).on('click', '.delete_photo', function(event){ var del_id = $(this).attr('id'); $.ajax({ type:'POST', cache: false, url:&apo ...

javascriptjqueryhtmlcss

Animating multiple elements in Angular 2 using a single function

Currently, I am delving into Angular and faced a challenge while attempting to create a toggle categories menu. Within my navbar component, I have an animation trigger set up as follows: trigger('slideCategory', [ state('opened&apo ...

htmlangulartypescriptevent-handlingfrontend

Error in External JavaScript File and Uncaught Reference Error

Wanting to utilize a separate Javascript file with my HTML code, I encountered an issue. Here is the code for the HTML document: <!DOCTYPE html> <html> <a href="javascript:showAlert()">Show Alert!</a> <script type="text/jav ...

javascripthtml

The nb-install mixin is not recognized

While working with angular5, I encountered the 'No mixin named nb-install' error when running npm start or serve Module build failed: undefined ^ No mixin named nb-install Backtrace: stdin:13 in E:\mrb_bugfixes& ...

cssangularscss-mixinsnebular

Integrating a Find Pano functionality into a Kolor Panotour

I used a program called Kolor to create a panorama. Now, I am attempting to integrate the "find pano" feature, which involves searching through the panoramic images for display purposes. I have come across an HTML file that contains the search functionalit ...

javascripthtmlcsssearchpanoramas