Bottom dynamic div

I have three divs: head, foot and textbox. The head and foot divs are fixed positions, and the third div is partly fixed (margin-top).

My query is: How can I adjust the bottom of the textbox's div to accommodate different monitor sizes? Using 100% height causes it to overlap with the foot div. On this homepage, scrollbar is not used as the background changes image files. I would like to dynamically adjust the margin-bottom to maintain a distance from the monitor's bottom.

<html>
<head>
<title>Div bottom</title>
<style>
.head{
    position:absolute;
    clear:both;
    top:0px;
    right:0px;
    float:right;
    width:100%;
    height:80px;
    background-color:grey;
}
.foot {
    position:fixed;
    clear:both;
    height:35px;
    right:0px;
    float:right;
    width:100%;
    background-color:grey;
    bottom:0px;
}
.textbox {     
    overflow: hidden;
    position: relative;
    padding:20px;
    border: 1px solid gray; 
    background-color:red;
    z-index:0;
    text-align:justify;
    color:black;
    line-height: 2em;
    border-radius: 3px;
    margin-top:100px;
    width:910px;
    margin-left: auto; 
    margin-right:auto;
}
</style>
</head>

<body>
<div class="head">HEAD</div>

<div class="textbox">?</div>

<div class="foot">FOOT</div>
</body>
</html>
javascriptcsshtmlsize

Answer №1

To achieve this task, you can utilize JavaScript. Insert the following script into the head section of your HTML document:

<script type="text/javascript>
window.onload=resize_height;

function resize_height(){
    var height = 0;
    var divs = document.getElementsByTagName('div');
    if(self.innerHeight){
        height=self.innerHeight;
    }else if(document.documentElement && document.documentElement.clientWidth){
        height=document.documentElement.clientHeight;
    }else if(document.body){
        height=document.body.clientHeight;
    }
    divs[1].style.height=(parseInt(height)-200)+'px';
}

</script>

The number 200 is calculated based on the sum of height, padding, and margins. You can dynamically adjust this value by considering the specifications of other div elements.

EDIT:

In addition, for the textbox element, replace margin-top:100px; with top:100px; ....

.textbox {
    overflow: hidden;
    position: relative;
    top:100px;
    padding:20px;
    border: 1px solid gray;
    background-color:red;
    z-index:0;
    text-align:justify;
    color:black;
    line-height: 2em;
    border-radius: 3px;
    /*margin-top:100px;*/
    width:910px;
    margin-left: auto;
    margin-right:auto;
}

Answer №2

If you're looking for a pure CSS solution for the 'header content footer' layout, you don't need to use a script. Check out this link.

You have the option to include a margin between sections, as well as vertical and horizontal centering. The layout is fully responsive.

HTML:

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">
                </div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper Content">
                    <div class="Centered">
                    </div>
                </div>
            </div>
        </div>
    </div>
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.Inverse, .Inverse > *
{
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

/*For Centering only*/
    .Content:before
    {    
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-left: -5px;
    }
    .Centered
    {
        display: inline-block;
        vertical-align: middle;
    }


/*For demonstration only*/
p
{    
    font-size: 1.3em;
}

.Important
{
    font-weight: bolder;
    color: white;
}

body > .Container
{
    padding: 0 5px;
    text-align: center;
}

.Header, .Footer
{
    margin-bottom: 5px;
    padding: 5px 0;
}
.Header
{
    background-color: #bf5b5b;
}
.Content
{
    background-color: #90adc1;
}
.Footer
{
    background-color: #b5a8b7;
}

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

Using CSS to style HTML elements with spaces

Apologies if this question can easily be answered with a Google search, but I am having trouble finding the right keywords to use. While I have a decent grasp of CSS, I feel like there is still much more potential to explore and improve my code efficiency. ...

htmlcss

Value of an object passed as a parameter in a function

I am trying to use jQuery to change the color of a link, but I keep getting an error when trying to reference the object. Here is my HTML : <a onmouseover="loclink(this);return false;" href="locations.html" title="Locations" class="nav-link align_nav" ...

javascriptjqueryhtmlcss

"Trouble arises when dealing with nested object arrays in Formik and handling changes in a child

I am struggling with passing a value to handleChange in formik validation. To address this issue, I created a component whose quantity is dynamically added based on the number of numChild. My goal is to allow users to click an icon and add any number of sk ...

javascriptreactjsformik

Conceal when dates align

In my events list, I have dates displayed and would like to hide any end dates that are the same as the start dates. For instance; <span class="start_date">Wed 23rd January</span> <span class="end_date">Wed 23rd January</span> I ...

javascriptjquerydate

Issue with Colspan in Nested Tables in Bootstrap 4.1.3

I'm dealing with an issue related to colspan within a nested table. I've tried various solutions, including wrapping the table in a div, but nothing seems to be working as expected. My goal is to have the nested table span across the entire width ...

htmlcssbootstrap-4

Ensure that all content stays on a single line regardless of the phone's screen size

I have successfully implemented a hamburger mobile menu, but I encountered issues when trying to include contact information within the menu. After experimenting with two different approaches, I found that the first method worked on all devices except iPh ...

jqueryhtmlcssmenuresponsive

Creating a container that scrolls horizontally

I am working with ngbootstrap and angular, however, I believe the issue at hand is more related to html/css. My goal is to create a container that scrolls horizontally, despite coming across several helpful threads on this topic, I am struggling to impleme ...

htmlcssng-bootstrap

In React-bootstrap, is there a way for a custom class to take precedence over the btn and btn-danger classes without relying on IDs or !important, and only utilizing

I have been using React-bootstrap to style my buttons, however, I am facing difficulty in overriding the default btn and btn-danger classes provided by Bootstrap. Is there a way for my custom class slotTiming-box-button to take precedence over the btn and ...

cssreact-bootstrapbootstrap-5

Modifying radio inputs to update when a state variable is altered in react.js

In my HTML, I have a div that includes 4 radio inputs, and another div with an onClick event that increments a counter. Every time I click on the div, I want the radio inputs to reload so that no input is selected. Below is the code snippet: 'use clie ...

javascriptreactjsnext.js

The desired popup window failed to show up after the button was clicked

How can I combine a popup window with the gear button so that when the gear button is clicked, a popup window appears? Here is the CSS code snippet: .overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; cursor: default; left: 0; ...

htmlpopup

Update the text on the button when tasks are in progress in React

I am working on a React project and I need to implement a button that changes its text from Save to Saving... when clicked, and then back to Save once the saving process is complete. My initial approach looks like this: import React from 'react&apos ...

javascriptreactjs

Encountered a 404 error while utilizing the Java - Angular web service

Encountering an error 404 in Firebug when attempting to send an object from Angular to a Java controller using JSON. While the backend in Java is able to receive the message, Angular is unable to find the specified path. Consequently, there is an issue wit ...

javajavascriptjsonangularjs

Is there a more efficient approach to extracting the border width using javascript?

I implemented the following code: const playGard = document.getElementsByClassName("playGard")[0]; const borderW = getComputedStyle(playGard,null).getPropertyValue('border-left-width').substr(0,2); The result I obtained was "10". Is there a m ...

javascriptcssgetcomputedstyle

Utilizing Angular2 to access NPM package (Googleapis)

I am currently developing an Angular2 application that utilizes Webpack for the build process. I want to implement a Google oauth login feature in my application, so I have added the googleapi package from npm. However, I am facing difficulties when trying ...

javascriptgoogle-apinpmangular

Angular ng-show does not seem to evaluate properly

After receiving the JSON array object below: "Tools": [ { "name": "Submit a Claim", "position": 1, "isOn": true, "alert": null }, { "name": "My Recurring Claims", "position": 2, "isOn": true, "alert": null }, { "name": "Online Enrollment ...

htmlarraysangularjsjson

Creating a simple form page using Express JS

I am a beginner in the world of Node Js and Express Js, currently diving into learning from a book titled "Jump Start NodeJs" by Sitepoint. The author has provided a simple Login Form page as an example in the book. However, when trying to implement the co ...

javascriptnode.jsexpress

The technique for handling intricate calls in node.js

My goal is to create a social community where users are rewarded for receiving upvotes or shares on their answers. Additionally, I want to send notifications to users whenever their answers receive some interaction. The process flow is detailed in the com ...

javascriptnode.jsmongodbasynchronous

Tips for choosing options from interactive drop-down menus with watir

Seeking to streamline the login process, I am looking to automate the generation of a list of databases using specified username and password credentials. I attempted the following approach: Browser.text_field(:id,"comboDatabase").when_present.set "(tas01 ...

htmlwatir

Can you navigate to the end of a div once an element has finished loading?

Just like the situation described in the linked question, I am facing an issue with a page that populates with chat-style bubbles when clicked - each click adds a new "bubble." These bubbles are all within a .content div without a fixed height. However, i ...

jqueryhtml

Communication between clients using a Progressive Web Application (PWA) when

Is there an efficient way to communicate and share data between devices using an offline progressive web app without internet access? I thought of exploring the possibilities with the Web Bluetooth API and generating QR codes through libraries like QRCode ...

javascriptprogressive-web-appsqr-codecommunicationweb-bluetooth