Why is my header fixed at the top?
My footer remains fixed at the bottom.
And there is no need for scrolling.
How can the #content fill 100% of the remaining space in the center?
body{overflow-y:hidden;}
footer {
position: fixed;
height: 50px;
bottom: 0;
width: 100%;
}
header{
background-color:yellow;
}
section#content{
background-color:green;
height:100%
}<header>
Header
</header>
<section id="content">
Content
</section>
<footer>
Footer
</footer>The issue you were facing was that the html and body were not set to 100% height, as pointed out correctly in the comments.
By adding height: 100% to both html and body, you will resolve the problem.
html,
body {
height: 100%;
}
html,
body {
height: 100%;
overflow-y: hidden;
}
footer {
position: fixed;
height: 50px;
bottom: 0;
width: 100%;
background-color: lightblue;
}
header {
background-color: yellow;
}
section#content {
background-color: green;
height: 100%
}<header>
Header
</header>
<section id="content">
Content
</section>
<footer>
Footer
</footer>It seems like you may be looking for something like this. Take a look at the code snippet below:
var winHeight = $(window).height();
var headHeight = $('header').height();
var footHeight = $('header').height();
var headFoot =headHeight+footHeight
$("#content").css("height",winHeight -headFoot);body{overflow-y:hidden; margin:0px;}
footer {
position: fixed;
height: 50px;
bottom: 0;
width: 100%;
background:red;
}
header{
background-color:yellow;
width: 100%;
}
section#content{
background-color:green;
height:100%;
overflow:auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
Header
</header>
<section id="content">
Content
</section>
<footer>
Footer
</footer>I am facing an issue where clicking on a button does not delete the table row despite both the tr id and button id having the same value. Can someone please guide me on what might be going wrong? <tr id="<?php echo $result->id;?>"> <t ...
I want to set up an event listener that triggers when any of the Bootstrap 3 accordions within or potentially within "#myDiv" are activated. This snippet works: $('#myDiv').on('shown.bs.collapse', function () { //code here }); Howeve ...
Currently, I am in the process of developing a unique sketching application using the HTML5 Canvas element. Despite my progress, there is one particular challenge that has stumped me. The main concept of the application involves allowing users to manipula ...
Imagine a situation where you have a div container measuring 200px by 500px. The goal is to implement an event listener that can identify the x and y coordinates within this div when it is clicked. What would be the approach to achieve this in React? ...
I have a simple navigation bar on my website, featuring links to different subpages. To enhance the user experience on mobile devices, I added a hamburger menu icon that is displayed on smaller screens. The links in the navigation bar are hidden using CSS ...
I am currently in the process of developing a web application that will provide users with the ability to compare the number of calories they burn during exercise with the amount they consume in a meal. To achieve this goal, I have chosen to utilize ChartJ ...
Important Note: The HTML to PDF rendering engine I am using disables JavaScript by default, so I am seeking solutions that utilize CSS only. Within my report, there is a table utilized for accounting purposes featuring 11 columns: The first column serve ...
Hey there, I have a project in mind to create a Google map with markers representing specific locations and their values displayed as bar charts. Here is the code snippet from my index page: --index.html-- <!DOCTYPE html> <html> <head ...
I'm struggling to keep the bootstrap accordion dropdown link blue when it's active. I've tried different methods but none seem to work. What am I missing? Here's my code: <div class="visible-sm visible-xs" id="accordion" role="t ...
I have an image with a ratio of 1920*1300 that I want to be displayed on any device the website is viewed and cover the entire div. Check out my code below: .carousel { width: 100vw; height: 80vh; position: relative; } .carousel a { width: 1 ...
Why isn't the highlight current Menu Item feature working? I've checked my code, but it doesn't seem to be functioning as expected. Could you lend me a hand? Html: <section id="menu-container"> <div id="bar"><img src="b ...
I'm currently facing a challenge with customizing the styling of the primevue component class p-accordion-header based on the status of the rendered component determined by the variantNumber. Here's a snippet of my code: <Accordion :multiple= ...
I am looking to create a fixed bar that is off-center with a scrolling background. The code I have so far either places the bar on the surface but fixes it to the background, or it positions the bar beneath the image and fixes it to the window - neither ...
Wouldn't it be cool to have a video play and follow your mouse pointer when you hover over the red box? And then once you move away, the video stops and disappears. Check out my progress so far: jsfiddle Here's the jQuery code I've used: $ ...
I'm developing an HTML5 hybrid iPad app and need to create a PDF file of a report generated on one of the pages. I would like to save this PDF on the iPad. Can you provide assistance with achieving this task? I am utilizing JavaScript and mobile jQuer ...
I am currently utilizing CSS3 to smoothly move a div up and down based on the direction of scrolling. By monitoring the mouse wheel event, I can detect when a user scrolls down and trigger a CSS3 transition to slide the div up. However, I am encountering a ...
For my project, I decided to utilize the Grid component of Material UI v5 to create a global table component. This choice was made due to the difficulties encountered when trying to modify the border and border radius for the table row and footer elements. ...
I am working on a project for my college where I need to restrict the number of times a button can be clicked to only 3 times. I have searched everywhere for code to achieve this and finally found some yesterday. The code is functioning partially as it giv ...
I'm currently using the angular-fullstack generator and I've received data in response to a GET request in the form of integer values (1, 2 5, 6 134, 245 236, 567 415, 234 and so on). I'd like to display these values in an HTML t ...
Currently diving into the world of Angular, I've encountered an issue with a material menu that isn't displaying correctly. The expected outcome based on my code should resemble this image: https://i.stack.imgur.com/z70Aq.png This snippet showc ...