I am in need of HTML structure that looks like the following:
<header></header>
<div id='main'></div>
<footer></footer>
I want all elements to be positioned relatively. The header and footer will have fixed heights. The main div should automatically fill the entire page, with the header at the top and the footer at the bottom.
Can anyone assist me with this?
using jquery:
$(function() {
var screenHeight = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight());
$("#main").css("min-height", screenHeight +"px");
});
In this code snippet, we dynamically adjust the height of the main div based on the browser viewport height by taking into account the heights of the header and footer elements.
I hope this explanation clarifies things for you :)
UPDATE: Instead of extending your main section to 90%, consider simply adding the following style:
style='height:100%; margin-top=[header height]; margin-bottom=[footer height]'
This will ensure that your main content fills the entire page without any overlapping with headers and footers. Test it out.
After reviewing your query, it seems like the best approach would involve incorporating
nav {position: fixed;}
#content {min-height: 90%;}
footer {position: fixed;}
For a more comprehensive demonstration, refer to this example: http://jsfiddle.net/R8tEw/1/
This solution has quickly become one of my top favorites.
The concept involves creating a wrapper set to 100% min-height, allowing you to position the footer at the bottom, header at the top, and the content filling the remaining space.
#container {
display:grid;
grid-template-rows:auto 1fr auto;
grid-template-columns:100%;
/* fallback height */
min-height:100vh;
/* new small viewport height for modern browsers */
min-height:100svh;
}
My goal is to retrieve 3 specific data points from a webpage using the ajax get method. Here is the javascript code: <script type="text/javascript"> var busy = false; var limit = 15; var offset = 0; var id = 150; function displayRecords( ...
Here is a simple demo showcasing blocks with tooltips that appear when hovered over. However, there seems to be an issue with the functionality. The tooltip should ideally be displayed either from the left or right side of the block. To determine the size ...
I have a situation where my navbar has two styles (.navbar and .navbar_fixed), but the links in the navbar are not fitting properly. I attempted to remove padding and add left: 0;, however, these adjustments did not work as expected. Any suggestions on how ...
I have a dropdown icon (pumpkin 1) div that is causing spacing issues with the other icons on the page. The problem is that it has a dropdown functionality which needs to overlay the text at the bottom. I want to display all icons next to each other (1,2, ...
I am currently working with an XML file structured like this: <UUT> <DKBFile>091750</DKBFile> <part> <name>FL_U1</name> <xcoord>439</xcoord> <ycoord>132</ycoord> <width>55</width ...
I'm a beginner when it comes to css. In my wordpress website editor (Onetone theme), I added the following rule to my 'custom css field': html, body {margin: 0; height: 100%; overflow: hidden} It's working well...the scrollbar is gone ...
I'm currently facing a challenge with rendering two objects using EJS. I am curious to know if it is feasible to render them both within the same pair of scriptlet tags or if they need to be rendered separately? So far, I have been able to successful ...
I have written some code to fetch JSON data from a servlet using an Ajax call. When the success function is executed, I am able to see the response in the console as Object: [{"userId":"dfeterter"}]. However, I am facing difficulty in accessing the value ...
Is there a way to include an external CSS file in an external JS file? I am trying to reference and load Default.css inside Common.js like the image below shows. Any suggestions are greatly appreciated! BB ...
Using markup, I have created a dropdown menu utilizing Twitter Bootstrap. <ul class="nav pull-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b>< ...
I want to create a feature that allows users to input a list of IDs in a textarea, with the option to separate them by either whitespace or commas. After the user inputs the list, I need to convert it into an int[] array but also throw an error if the str ...
Is there a method to prevent my links from becoming underlined or changing color when hovered over? ...
Below are the details with an error: Error Details: Failed to compile. ./src/components/Header.vue Module Error (from ./node_modules/eslint-loader/index.js): H:\project\VueProjects\stock-trader\src\components\Header.vue 27: ...
I am facing a complex issue that requires attention. Let me explain the situation: There is an unordered list consisting of list items displayed vertically with alternating background colors, all having the same width within a fixed-width div. Some list i ...
I've been delving into AJAX for about 2 hours now, trying to understand how to make it work. It seems like the function is being called, as an alert works perfectly fine. When I tried a different method, it seemed to trigger the function automaticall ...
I am utilizing bootstrap notifications to display important messages to my users. Within my code, there is a DIV element named <div class="notifications bottom-right"></div> Theoretically, the library should be handling the JavaScript. I ha ...
As a newcomer to development, I am currently experimenting and creating a sample dashboard. However, I am facing an issue where the sidebar value does not display upon loading the page. I have to manually click on a list in my sidebar for it to appear. Th ...
I've been struggling with a puzzling issue all day, and I'm hoping that someone with more expertise can help me solve it. As I work on updating the design of my website, I've encountered what seems to be a bug specific to Firefox. I've ...
function addResource() { var imgIndex = getIndexByImageID(currentDraggedImgID); var newImageID = resourceCollectionSize.length; // Insert the image $('#thePage').append('<img alt="Large" id="image' + newImageID + &a ...
I'm working on a list with horizontal scroll functionality to allow users to view content by scrolling. I have successfully implemented this, but I'm facing a couple of challenges that I need help with: I want the first item in the list to alwa ...