Designing a div with a proportional size amidst elements of fixed dimensions

Question

Designing a div with a proportional size amidst elements of fixed dimensions

I need help figuring out how to create a dynamically sized div based on the browser's height. I'm not sure where to start or how to approach this problem.

The layout I have in mind includes a 50px high header, followed by the dynamic div and then a fixed 50px div that should remain within the visible screen area without scrolling. Any additional content can extend beyond the screen.

For example, if the browser is 1000px tall, 100px would be allocated for the top and bottom divs, leaving the dynamic div at 900px in height.

To better illustrate my concept, here's a simple image I made using basic paint tools:

The orange border outlines the full page size.

I understand that achieving this with JavaScript is straightforward for me, but I'm hoping to find a CSS-only solution. Any suggestions?

css html

Answer 1

Answer №1

Here is a creative concept: use percentages instead of pixels for the header and footer, check it out here

<div id='header'></div>
<div id='content'gt;
    <div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>

And the corresponding CSS: body { height:100%; } #header { width:100%; height:15%; position:absolute; top:0; background:red; margin:0; }

#footer {
    width:100%;
    height:15%;
    position:absolute;
    bottom:0;
    background:blue;

}

#content {
    position:absolute;
    width:100%;
    top:15%;
    height : 70%;
    background:yellow;
    overflow-y:auto;
}
#content #scrollable {
     min-height:100%;
}

Answer 2

Here is a creative concept: use percentages instead of pixels for the header and footer, check it out here

<div id='header'></div>
<div id='content'gt;
    <div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>

And the corresponding CSS: body { height:100%; } #header { width:100%; height:15%; position:absolute; top:0; background:red; margin:0; }

#footer {
    width:100%;
    height:15%;
    position:absolute;
    bottom:0;
    background:blue;

}

#content {
    position:absolute;
    width:100%;
    top:15%;
    height : 70%;
    background:yellow;
    overflow-y:auto;
}
#content #scrollable {
     min-height:100%;
}

Answer 3

Answer №2

Here is the code you requested:

<div id="screen">
<div id="header"></div>
<div id="footer"></div>
</div>

Next, here is the corresponding CSS:

#screen {
 height: 1700px;
 width: 100%;
 position: relative;
 }
#header {
 height: 50px;
 width: 100%;
 position: fixed;
 top: 0px;
 }
#footer{
 height: 50px;
 width: 100%;
 position: fixed;
 bottom: 0px;
 }

Do these changes meet your requirements? I added the 'position: relative' and 'height' properties based on my understanding of what you are aiming for.

Answer 4

Here is the code you requested:

<div id="screen">
<div id="header"></div>
<div id="footer"></div>
</div>

Next, here is the corresponding CSS:

#screen {
 height: 1700px;
 width: 100%;
 position: relative;
 }
#header {
 height: 50px;
 width: 100%;
 position: fixed;
 top: 0px;
 }
#footer{
 height: 50px;
 width: 100%;
 position: fixed;
 bottom: 0px;
 }

Do these changes meet your requirements? I added the 'position: relative' and 'height' properties based on my understanding of what you are aiming for.

Answer 5

Answer №3

If you're looking for a useful technique, here's one that I've relied on numerous times. This method is most effective when the height of your relative positioned div is not fixed. Judging by your explanation, this should suit your needs perfectly.

Here is the basic markup:

<body>

    <header>DIV 1 - 50PX</header>

    <div class="main">MAIN STUFF - RELATIVE</div>

    <footer>DIV 2 - 50PX</footer>

</body>

CSS:

body, html{
    width:100%;
    height:100%;
}

body{
    margin:0;
    position:relative;
}

header{
    position:absolute;
    width:100%;
    height:50px;
    top:0;
    left:0;
    background:#666666;
    color:#ffffff;
    z-index:10;
}

footer{
    position:absolute;
    width:100%;
    height:50px;
    bottom:0;
    left:0;
    background:#555555;
    color:#ffffff;
    z-index:10;
}

.main{
    position:relative;
    box-sizing:border-box;
    padding:50px 1em;
    height:150%; /* this is to simulate your dynamic content */
    background:#cccccc;
}

http://jsfiddle.net/xdeQ6/1/

By adding padding to the main content div, you ensure that the actual content at the top and bottom of your page remains visible and does not get hidden behind the header and footer divs.

Answer 6

If you're looking for a useful technique, here's one that I've relied on numerous times. This method is most effective when the height of your relative positioned div is not fixed. Judging by your explanation, this should suit your needs perfectly.

Here is the basic markup:

<body>

    <header>DIV 1 - 50PX</header>

    <div class="main">MAIN STUFF - RELATIVE</div>

    <footer>DIV 2 - 50PX</footer>

</body>

CSS:

body, html{
    width:100%;
    height:100%;
}

body{
    margin:0;
    position:relative;
}

header{
    position:absolute;
    width:100%;
    height:50px;
    top:0;
    left:0;
    background:#666666;
    color:#ffffff;
    z-index:10;
}

footer{
    position:absolute;
    width:100%;
    height:50px;
    bottom:0;
    left:0;
    background:#555555;
    color:#ffffff;
    z-index:10;
}

.main{
    position:relative;
    box-sizing:border-box;
    padding:50px 1em;
    height:150%; /* this is to simulate your dynamic content */
    background:#cccccc;
}

http://jsfiddle.net/xdeQ6/1/

By adding padding to the main content div, you ensure that the actual content at the top and bottom of your page remains visible and does not get hidden behind the header and footer divs.

Answer 7

Answer №4

My strategy is as follows:

header, footer {
    background: #f00;
    position: fixed;
    width: 100%;
    height: 50px;
    left: 0;
}
header {
    top: 0;
}
footer {
    bottom: 0;
}

#content {
    margin: 50px 0;
}

Take a look at my code on this fiddle: http://jsfiddle.net/Vw97D/1/
Are you satisfied with the outcome?

Answer 8

My strategy is as follows:

header, footer {
    background: #f00;
    position: fixed;
    width: 100%;
    height: 50px;
    left: 0;
}
header {
    top: 0;
}
footer {
    bottom: 0;
}

#content {
    margin: 50px 0;
}

Take a look at my code on this fiddle: http://jsfiddle.net/Vw97D/1/
Are you satisfied with the outcome?

Designing a div with a proportional size amidst elements of fixed dimensions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Lean/Tilt just the lower portion of the division

Using jQuery to add a class to an input option if its value exists in an array

Overlapping Flexbox elements causing stacking issues

Creating a Seamless Bond Between JavaScript and HTML

Can a mobile device be programmed to automatically bring up the keyboard for the autofocus element?

Convert a form into plain text utilizing CSS with minimal usage of jQuery or Javascript

How to properly format an HTML input box for numeric entry and ensure correct formatting of the minus sign

Scrolling automatically

Tips for executing a Python function from JavaScript, receiving input from an HTML text box

Javascript editing enhancement for real-time changes

Excess gap detected in dual-column design

Guide to building a personalized 12-column CSS grid system with Flexbox technology

How to Align Paypal Button in the Middle of a Table Cell within a Concealed Form Using HTML and

The collapse component from bootstrap is not visible due to an overlapping button

Refreshing Div Element with PHP AJAX POST请求

Nested divs with independent scrolling capabilities

Modifying the appearance of Bootstrap button colors

What is the best way to ensure my responsive form is centered and aligned properly with all other elements on the page

HTML text-indent is a way to add extra space to

What could be causing the failure of this web component using shadow DOM when the HTML code includes multiple instances of the component?