Currently, I am dealing with a situation where I want the content to occupy 100% of the page, excluding the initial 100px from the top bar. However, my code seems to be malfunctioning.
<style>
#content{
display: block;
height: 100%-100px; <!-- I require a solution for this issue as it is not working properly -->
}
#topbar{
height: 100px;
display: block;
}
</style>
Many suggestions for fixing the layout issue involve using margin-top, but this can be tricky when dealing with elements set to 100% height.
For a truly fixed header, consider implementing code like this:
#content {
height: 100%;
padding-top: 100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#topbar {
height: 100px;
position: fixed;
}
Update: To see an example in action, check out this CodePen link.
The key snippets from the example include:
html, body {
height: 100%;
}
#topbar {
height: 100px;
width: 100%;
position: fixed;
}
#content {
height: 100%;
padding-top: 100px;
box-sizing: border-box;
}
Include a padding-top:
#main{
display: block;
height: 100%;
padding-top: 100px;
}
Consider adding a bottom margin like this:
#content {
height: calc(100% - 100px);
}
This technique will automatically calculate the necessary height for you! :) Give it a try.
Find out more here: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
To obtain a similar outcome, you might consider using...
.main-content{
visibility: visible;
padding-top: 100px;
}
I have a fixed position div that I want to center in my browser window. Although it can be done with CSS, the issue is that I am dynamically changing the element's width multiple times (due to loading content via ajax), which means the width changes ...
I am looking to set the maximum width of the "circlecontainer" to 300px, but I also want my 4 child divs (each with a max width of 300px) to remain centered in the browser when it exceeds a width of 1200px. Currently, they are aligned to the left side. Be ...
My Java code sends data to the browser via an HTTP request, and the output looks something like this: JAVA CODE OUTPUT | Id | Operation | Name | Rows | Bytes | Cost (%CPU)| Time | | 0 | SELECT STATEMENT | | | | 3 ...
Scrolling within inner div is not functioning properly in the Mozilla Firefox browser. However, it works seamlessly in Chrome. Is there a workaround for enabling scrolling in Firefox? Here is the fiddle link: http://jsfiddle.net/t6jd25x9/2/ body { f ...
Struggling to position my sidebar at the bottom of the page without using fixed positioning, as I don't want the buttons to scroll along with it. I simply want the background to extend to the bottom of the scrollable page. Despite trying various "solu ...
I am looking to place elements on a page based on where the user clicks with their mouse. I am currently trying to add a string to the div using the .append() method. The issue I am facing: how can I add two elements to the div without affecting other ele ...
Attempting to create a dropdown menu with nested <ul> tags, each <li> containing a number generated using CSS Counters. Sub-menus remain hidden with display:none until hovered over. The issue arises when the counters do not increment for elem ...
Issue Almost done with my navbar (see code below), but the "Username" dropdown isn't behaving as expected. On larger screens it drops up, which is great, but on smaller screens it's dropping down into the navbar. If you resize the page, you&apos ...
Some time ago, I inquired about a way to avoid repeating the same prefix in TailwindCSS like `hover:` multiple times here. Someone was able to solve the issue using javascript, which seems to be working perfectly fine for now. However, a commenter mentio ...
This situation is quite challenging, and I believe achieving it with plain CSS3 alone is difficult (easier with jQuery, but I'm trying to avoid that). Are there any potential workarounds or hacks? My main goal is for it to be cross-browser compatible ...
My partner is concerned that temporarily serving a maintenance page for 24 hours, due to the accidental deletion of our database, could potentially harm our Google index and rating. However, I personally don't see it as a major issue. ...
My table is structured as follows: th1 th2 th3 th4 th5 th6 td1 td2 td3 td4 td5 td6 td1 td2 td3 td4 td5 td6 I am looking to incorporate a feature where new rows are dynamically added using a form that triggers ...
I'm facing a challenge $('input[type=radio][name="voucher_type"]').on('change', function() { //doing something here }); So, when a radio button is clicked, actions are taken. The radio button sits inside a styled div that acts as ...
`::-webkit-scrollbar{ width: 12px; } body::-webkit-scrollbar-track{ background: #f1e9e9; border-radius: 10px; margin-block: 0.1875rem; } ::-webkit-scrollbar-thumb{ background-color: #582965; border-radius: 10px; border: 3px so ...
I am encountering a simple issue that is giving me an error message TypeError: Cannot set property 'question' of undefined at setQuestion I am struggling to identify the root cause of this problem. As I am new to AngularJS, I wonder if ...
Apologies if the title is a bit vague. I have a sticky element and I'm interested in changing its color to white when it passes over a section/div of a specific color. Is this achievable? ...
I am a beginner with Blazor and typically use JavaScript for this task, but Blazor uses C#. I am attempting to incorporate the functionality of using an HTML button to minimize my chat window. However, I am uncertain about how to approach this. Currently, ...
Hey there, I've encountered an intriguing problem that's got me stumped. I'm attempting to create a menu made up of vertical bars that span the full height of the window and have a fixed position. I want the text within these bars to displa ...
HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...
In the ever-evolving world of web development, what is the most effective method for creating a drag and drop builder in 2017? While this question has been posed in the past (as seen here), technology changes rapidly. Is HTML5 still the go-to option, or ha ...