Steady heading, unchanging bottom segment, adaptable content

I'm having some trouble with my dynamic content. Let me illustrate it for you:

This is how my HTML code looks:

<div id="header"> ... </div>

<div id="container">
    <div class="block"> ... </div>
    <div class="block"> ... </div>
    <div class="block"> ... </div>
    <div class="block"> ... </div>
</div>

<div id="footer"> ... </div>

My query is: How can I make the container fluid while keeping the header and footer fixed? The blocks inside the container are set to 50% height and width, so only the container needs to be at 100% height (minus the fixed header and footer).

htmlcsstwitter-bootstrap

Answer №1

To achieve this effect, utilize the box-sizing property.

Here is an example:

FIDDLE

(this demonstration assumes a header with a height of 64px and a footer with a height of 30px)

HTML Markup

<header>header</header>
 <div class="container">
     <div id="content">
         <div class="block">block1</div><!--
         --><div class="block">block2</div><!--
         --><div class="block">block3</div><!--
         --><div class="block">block4</div>
    </div>    
</div>
<footer>footer</footer>

CSS Styling

html,body
{
    height: 100%;
}
header,footer,div
{
   width: 100%; 
}
.container
{
    height: 100%;
    background: pink;
    margin: -64px 0 -30px;
    padding: 64px 0 30px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#content {
    overflow:auto;
    height:100%;
}
.block
{
    width: 50%;
    height: 50%;
    display: inline-block;
    border: 1px solid yellow;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
header
{
    height: 64px;
    background: purple;
    position: relative;
    z-index:1;
}
footer
{
    height: 30px;
    background: gray;
    position: relative;
    z-index:1;
}

Answer №2

Just like this

see it in action

CSS styling example

*{
    margin:0;
    padding:0;
}
#header{
    height:100px;
    background-color:red;
    position:fixed;
    top:0;
    width:100%;
}
#footer{
    height:100px;
    background-color:green;
    position:fixed;
    bottom:0;
    width:100%;
}
#container{
    background-color:#F7F7F7;
    width:100%;
    top:100px;
    position:relative;
}
.block{
    width:50%;
    background-color:gray;
  float:left;
}

Answer №3

To create fluid designs, utilize the float property with caution when dealing with the width part as it can be affected by borders or padding. It is recommended to use percentages for measurements to ensure responsiveness. Another option is to implement Box sizing as Daniel suggested in order to maintain consistency. Additionally, consider incorporating media queries for further customization.

Answer №4

Your question has been tagged with twitter-bootstrap. Here is an alternative approach optimized for Bootstrap:

See it in action:

View the code:

This method includes a standard Bootstrap header and navigation bar, along with a fixed footer. The central container utilizes table, table-row, and table-cell to accurately size the center boxes at a 50/50 ratio.


.center-container {
  height: 100%;
  display: table;
  width: 100%;
  margin: 0;
}

.center-row {
  height: 50%;
  width: 100%;
  display: table-row;
}

.center-row > div {
  height: 100%;
  width: 50%;
  display: table-cell;
  border: 1px solid #eee
}

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 center text of varying lengths vertically and allow it to wrap around a floating image?

Looking to create a div with an image floated to the top left and text of varying lengths. The aim is to have the text centered in the middle if it's shorter than the image or wrap around it if there's enough content. The basic layout is: <d ...

htmlcssvertical-alignment

problem with saving session data

I am attempting to access data from another page using session storage. On my initial page, named home.html function go_to_faq(qnum){ window.open('FAQ.html', '_blank'); sessionStorage.setItem('key2', qnum); } <a s ...

javascripthtmlcsssession-storage

AngularJS combined with jVectorMap allows for the seamless rendering of small interactive

I am facing a similar issue to one discussed here, but with some minor differences. Initially, my map loaded without any problem on the site. However, after adding Angularjs to the site, I noticed a 'small' map issue. It seems like a simple code ...

javascriptjquerycssangularjsjvectormap

What is the best way to extract the information from a neighboring HTML element using Python and Beautiful Soup?

Is there a way to use Python and BeautifulSoup4 to read the next HTML element after locating a specific link in the page source? For instance, consider this snippet of page source: <a class="" onclick="" href="http://moodle.example.com/mod/resource/vie ...

pythonhtmlbeautifulsouphtml-parsingweb-crawler

Unable to align text in the middle of the header

Seeking help with my design flaws, I have created a fiddle to showcase the issues that arise when attempting to make it responsive. The main problem is that the HEADING IN CENTER text is not aligned properly in the center. If I remove the position attribut ...

htmlcssresponsive-designsemantic-ui

Json data integrated dropdown menu

I have successfully retrieved data from a Json array and displayed it in a dropdown list. However, I am facing an issue where I want to only show the name of the city instead of both the name and description. If I remove cities[i]['description'], ...

javascripthtmljson

Website Navigation Bar Template

Can someone assist me, please? I've been working on this project for a few hours now. As a beginner in html and css, I've been doing extensive research but haven't found a solution that works perfectly for my needs. The only thing that some ...

htmlcssnavigationbar

Modifying SASS variable values based on the presence of specific text in the page URL

How can I utilize the same SASS file for two different websites with similar functionality but different color schemes? My goal is to dynamically change the color based on the URL of the page. However, I am facing challenges in extracting the page URL from ...

javascriptjqueryhtmlcsssass

Preserving data and retrieving it

I've been working on a program for my diving coach that calculates the dive score as judges input their judgments. However, I'm encountering an issue where all fields clear themselves when I hit submit. Moreover, I'd like the ability to save ...

phphtmlvariables

Is there a way to stop the top nav from covering the first element of the side-nav in specific situations?

I'm grappling with the issue of how to prevent the side-nav from obscuring the top element in the vanilla Bootstrap 4 example provided below. Any tips? (Problem resolved - check below for solution) This problem is occurring not only on my website bu ...

htmlcsstwitter-bootstrapbootstrap-4

Hover to reveal stunning visuals

Can anyone help me figure out how to change the color of an image when hovered over using HTML or CSS? I have a set of social network icons that I want to incorporate into my website, and I'd like the icon colors to change when the mouse moves over th ...

htmlcsshovermousehover

Tips on transitioning between two tables

Recently, I created an HTML page entirely in French. Now, I am attempting to incorporate a language translation feature on the website that allows users to switch between French and English (represented by two flag icons). My concept involves using a tabl ...

javascriptjqueryhtml

Click here to get the button click link

Is there a method to obtain the link of a button click on a website? This is the Website and it features a play button. I am looking for a way to capture the link triggered by clicking the play button so that the audio starts playing automatically each t ...

javascriptphphtmlcssweb

Populating the table with data through a repetitive process

Is there a way to automatically populate a table using values from an array? <table> <thead> <tr> <div ng-repeat="n in range" > <th> {{vm.data.list[n].temp.day}} {{vm.symbal}} ...

javascripthtmlangularjsloops

Changing the Input Label Color on Hover in Material-UI TextField

I have a custom styled Mui TextField called CustomTextField. It changes the input background color and font color on hover, but I also want to change the label font color when hovered over. Currently, the input background changes from black to white on hov ...

cssreactjsmaterial-ui

What's the best way to animate the navigation on top of an image for movement?

I am currently in the process of creating my website as a graphic designer. My unique touch is having the navigation positioned on top of an image (which is animated via flash). This setup is featured prominently on my homepage, which is designed with mini ...

javascriptcssanimation

What is the best way to run a script following the completion of an external asynchronous script within the header tag?

Utilizing Webflow's custom code editor, I incorporated an external script from Finsweet within the <head> tag as per their instructions. Although I would like to modify the page with my own script following the execution of Finsweet's scri ...

javascripthtmlwebflowasynchronous-javascriptexternal-script

Single-Page Design Ascend

I'm facing a dilemma with my one-page website layout project. Instead of the conventional scroll down effect, I'd like to implement a design similar to www.xsbaltimore.com where users have to scroll up to view other sections. However, I'm un ...

htmlscrollweb

What causes my elements to move to the left when the screen size decreases with bootstrap?

If you want a better understanding of the situation, looking at images might be helpful. Here is how it typically appears: https://i.sstatic.net/mBZDp.jpg And this is how it appears on smaller screens: https://i.sstatic.net/8CuIs.jpg For smaller scree ...

htmlcssbootstrap-5

Tips for positioning a solitary md-tab component to the right

Can a single md-tab element be aligned to the right of md-tabs while keeping the rest of the tabs in their original position? ------------------------------------------------------------------------- | Tab 1 | Tab 2 | Tab 3 | ...

cssangularjstabsangular-material