UPDATE: I believe there was an excess of information. Let me simplify my question: How can I adjust the height of #middle to be 100% of the remaining space in the example below:
<body>
<div id="big">
<div id="header"></div>
<div id="middle"></div>
<div id="btm"></div>
</div>
</body>
The heights of #big, body, and html are all set at 100%.
The heights of header and bottom are both 120px;
Update: I have revised my example to align with the updated question you provided.
Below is a functional demonstration of your layout, successfully tested in IE8, IE7, Firefox, and Chrome.
The critical aspect here is to avoid setting the height of the middle section to 100%. Instead, it should be positioned absolutely, with the top and bottom dimensions matching the height of your header and btm elements (which, in this scenario, would be 120px).
If the height of the middle element is set to 100%, it will match the height of the big element (which spans 100% of the body tag), resulting in an oversized middle segment that could trigger lateral scroll bars.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html
{
height: 100%;
}
body
{
background-color: #EEEEEE;
height: 100%;
padding: 0;
margin: 0;
}
#big
{
width: 100%;
height: 100%;
}
#header
{
width: 100%;
background-color: #DDD;
height: 120px;
}
#btm
{
width: 100%;
height: 120px;
position: absolute;
bottom: 0px;
background-color: #999;
}
#middle
{
width: 100%;
position: absolute;
top: 120px;
bottom: 120px;
}
</style>
</head>
<body>
<div id="big">
<div id="header">
header
</div>
<div id="middle">
middle
</div>
<div id="btm">
bottom
</div>
</div>
</body>
</html>
Having a little issue here. I want to be able to toggle the sortable plugin's behavior by clicking a button - basically switching between sort mode and view mode. I've attempted to achieve this with the following code: function enterSortMode(){ ...
My goal is to create a coding playground using flex-box to position different panels. Here is an example in JSBin, with the following html code: <div class="flex-box"> <div class="col" id="html-panel"> <p>html</p> </div& ...
Hello, I am facing an issue with handlebars as it is not reading the HTML in my file. Here is a screenshot highlighting the problem along with the provided code. The folder structure is as follows: views layouts main-layout.hbs home.hbs https://i ...
I am attempting to implement a feature where multiple names can be added from an autocomplete drop-down menu to an input field, similar to the example shown below: Here is what I aim to create: Upon selecting an item from the drop-down, it should appear ...
I'm having an issue where I need a different modal to be displayed depending on the name in the markerSet array. Currently, the if/else statement is always returning the same modal. Take a look at the if statement in my JavaScript code below. The nam ...
Imagine a scenario where we have a file containing themes: themes.js: import {createMuiTheme} from "@material-ui/core/styles"; export const myTheme = createMuiTheme({ palette: { text: { color: "#545F66", }, }, }); In ...
I am facing a strange issue with my index.html page, which is a website built using jQuery Mobile. The problem arises when I click on a button multiple times within a form on this page - it generates an alert to confirm that the button is working and then ...
Check out this code snippet: <a href="#" class="list-group-item"> <span class="badge"><?=$st ?></span> <img class="small_profile_pic" src="<?=$pic ?>" /> aaa<a ...
Hello, I'm currently working on my "Add Blog Post" page where I would like to make a change. Specifically, I want to eliminate one textarea (the post description area) and have the content entered in the Post Content textarea populate both the post de ...
I am encountering an issue where, upon clicking to delete an entry, a mat dialog should appear with everything else in the background greyed out. However, the problem I am facing is that when I attempt to delete an entry, the dialog appears but the sticky ...
Whenever I try to execute the window.onload function from my .js file, it seems to not be firing as expected. <script type="text/javascript" src="{% static 'jsfile.js' %}"></script> window.onload = function() { alert(' ...
The border is supposed to be around the text, but it isn't showing up. Where did I go wrong? Could it be that I need to set a position? html { width: 100%; height: 100%; margin: 0; padding: 0; } body { width: 100%; height: 100%; marg ...
I am attempting to increase the size of the dropdown menu and change its background color. Currently, I can only modify the color of the links and the surrounding area. .navbar a { width: 125px; text-align: center; ...
Within my table, there is a column that consists solely of checkboxes as values. Using a for loop, I have populated all values into the table. What I have accomplished so far is that when a checkbox is enabled, a message saying "hey" appears. However, if m ...
After spending a considerable amount of time trying to center two buttons in Bootstrap, I came across the "text-center" class offered by Bootstrap. However, no matter where I include this class, it doesn't seem to have any effect on the alignment of t ...
I recently completed a website project using Contao for a client (visit www.medivas.de). Everything is working perfectly except for one issue: the last menu item in the main navigation (located at the top, above the slideshow) is causing a line break. This ...
I have successfully implemented a feature on my website that allows users to upload their avatar picture using Vue.js and Laravel as the backend. The image is stored in the storage directory, and I can display it on the user's profile page using Vue.j ...
I'm pretty new to programming, especially in Javascript. Can someone help me simplify my code? I'm trying to create a dropdown for months and an input field for the year. Is there a more efficient way to make the month select box? Also, how can ...
Currently, I am in the process of making my website responsive. This involves ensuring that the navigation bar moves along with the screen when resized. I am working on getting the CSS to wrap to the next line when the browser is resized. * { padding ...
The appearance of a select box in HTML can vary between different computers and browsers. For example, on one computer using Google Chrome, the select box may look like this: https://i.stack.imgur.com/g2Xnn.png However, on my computer with Google Chrome, ...