Set the height at the top to a specific value while allowing the width and height

Is there a way to design a layout with a fixed height div at the top and a second div below that always fills up the rest of the page's height and width, adjusting accordingly when the window is resized? An example of what I'm aiming for can be seen on

I've tried the following code:

<html>
<head>
<body style="width:100%;height:100%;position:absolute;background:#EEE;margin:0 auto">
<div style="border-bottom:1px solid #000;height:50px;background:#900">1st div</div>
<div style="height:100%;width:100%;background:#090">2nd div</div>
</body>
</html>

This sets up a fixed div at the top and a resizable div below it. However, the second div doesn't adjust its height according to the first div, making it taller than desired. Adjusting the height % manually solves this issue, but it's not consistent during window resizing due to the fixed height above.

Is there a solution without using JavaScript?

csslayouthtml

Answer №1

Why is it important to consider the background color of the body in web design?

For a visual demonstration, check out this demo fiddle.

Here's the CSS code:

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: #090;
}
#header {
    border-bottom: 1px solid #000;
    height: 50px;
    background: #900;
}

If you want the content to stretch to the bottom of the window, you can use absolute positioning as shown in this fiddle:

CSS:

#content {
    position: absolute;
    top: 51px;
    bottom: 0;
    background: #090;
}

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

Adding New Elements to a Collection with Thymeleaf

In my project using Spring, Thymeleaf, and Hibernate, I am looking for a way to add elements to a field that is a list in my editing object. How can I achieve this since embedded elements are not allowed? Here's an example of what I have: @Entity pub ...

javahtmlspringthymeleaf

Substitute a piece of text within an element while also preserving the formatting of a new line

My goal is to modify the text within the div tag "a/b" to "b/c" while preserving the line break that I have inserted in the HTML using the break tag. Currently, the text is being replaced, but I need the second line to appear below the first line. $(".t ...

javascriptjqueryhtml

The page refreshes when the anchor element is clicked

Currently, I am working on enhancing a web application that is built on the foundation of traditional aspx (asp.net) web forms with elements of Angular 6 incorporated into it. My current assignment involves resolving a bug that triggers a page refresh whe ...

javascripthtmlasp.netangular

Optimal method for showcasing a multitude of columns on an HTML page

Seeking to showcase a vast array of data in HTML (over 10,000 columns with approximately 200-300 rows) to present a schedule. The information will be structured as movable blocks containing text and background colors. Is it feasible to exhibit such a mas ...

htmlhtml-tablehtml5-canvas

Picture inside text area covering drop-down list

After making some adjustments to Bootstrap using a custom -theme.css file, I successfully altered the appearance of the dropdown menu. By removing the borders from the navbar and wrapping a header around it set to be fixed on top, everything seemed to be w ...

htmlcsstwitter-bootstrap-3

How to align three columns in the center using Bootstrap 4

Is there a way to center three col-md-3 columns without using offset? Offset doesn't work for me as I would have to offset the first column by one and a half columns. Is there an alternative method to achieve this? Below is the code outline: .col- ...

htmlcssbootstrap-4

The jquery scrolltop() function provides the value of the scroll position prior to the current

Using the jQuery function element.scrollTop(), I attempted to retrieve the current scroll position of the page with the following line of code: var currentScrollPosition = $('html').scrollTop() || $('body').scrollTop(); However, this ...

javascriptjqueryhtmlscrollscrolltop

When information is provided, record the values in a separate input field

I'm struggling to come up with an appropriate title... Here's the issue: if a user inputs anything into the "Accompanying Person" field, the "Accompanying Person Price" field will automatically be set to 260€. I have no clue on how to achieve ...

javascriptjqueryhtml

Issue with spacing in CSS sticky header on mobile devices

When implementing CSS position sticky for a floating header, I have noticed that on some mobile devices there is a small gap of around 1px between "element_b" and "element_c" while scrolling. #element_a{ width: 100%; position: -webkit-sticky !impo ...

csspositionsticky

What is the process for connecting a personalized bootstrap framework with an index.html document?

I have recently dived into the world of bootstrap and I just customized my bootstrap file on http://getbootstrap.com/docs/3.3/customize/ After compiling and downloading, I found it challenging to link it with my index.html file. The source of the bootstra ...

htmlcsstwitter-bootstrap-3customization

Adjust remaining vertical space

Trying to design a TailwindCss layout that resembles the following: +----------------------+ | | +-----+----------------+ | | | | | | | | | | | | +-----+------ ...

cssflexboxtailwind-css

transferring a JavaScript variable to PHP upon submitting a form

This question arises after my previous inquiry on the topic of counting the rows in an HTML table using PHP. Since I didn't find a solution that worked for me, I am exploring new methods but struggling with the implementation. My approach involves ass ...

phpjavascriptajaxhtmlforms

What steps can be taken to avoid my Bootstrap banner wrapping to a new line?

I am facing an issue while designing a top banner using Bootstrap. The condensed menu always wraps to a new line for the resolution of 1024x768. It works fine for resolutions greater than 1024x768. I need help with correcting my HTML so that the banner rem ...

htmlcsstwitter-bootstrapbootstrap-5

I am unable to contain my span within a div container

While Firefox, Safari, and Chrome seem to work fine with my code, I am encountering issues with Internet Explorer... Here is the snippet of my HTML: <div id="sc-footer">Total<span id="sc-total">$0</span></div> And here is the corr ...

cssinternet-explorer-7

Leveraging ternary operators within HTML elements

Currently, I am utilizing the Vue.js framework to create a dynamic list that updates based on two different list objects. My main objective is to adjust the border of the list cards depending on a specific condition. Below are the defined cards: <li ...

javascripthtmlvue.jsconditional-operator

Tips for ending the setInterval function within a do while loop using jQuery

My goal is to stop the setInterval function after the do-while loop meets a certain condition. The issue I am facing is that, even when the while loop's condition is met, the setInterval continues to run. do { setInterval(Vinformation(),500); } w ...

javascriptjqueryhtmlajaxsetinterval

Looking to determine the overall amount of rows in a table?

When using knockout binding to insert values into a table, I need to display an alert message if there are no rows in the table. To do this, I must first count the number of rows that contain data. The code for my view is shown below: <table class ...

phphtmljquery

The overlay background on the image does not seem to be functioning correctly

I'm currently working on adding an overlay to my image in order to darken it and display text over the top. I've tried using absolute positioning for both the image and overlay, but the overlay ends up covering the entire window and sitting above ...

htmlcssbackground-imageoverlay

issues with the styling and scripts within the jsp document

During my project work, I encountered an issue with the front end as shown in the image below. https://i.sstatic.net/gLIUr.png Upon loading the project, all styles and scripts disappear completely. How can I resolve this issue promptly? I attempted to up ...

jqueryhtmlcssjsp

Bootstrap button statuses confirmed

I am trying to implement a checked state for group checkboxes in Bootstrap 3.0.2. documentation This is the HTML code snippet: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="check ...

javascriptjqueryhtmlcsstwitter-bootstrap