My website has a fixed header with a height of 44 pixels, content that takes up 89% of the screen, and a footer that occupies 6% of the space. Everything looks fine when the browser is at 100% zoom, but as I zoom out, white spaces start appearing before the footer section.
I attempted to change the header's height to 5%, but unfortunately our requirements dictate that the header must remain fixed at 44 pixels.
Question:
Is it feasible to have a static header with dynamic content and footer?
If you're looking to create a layout with a static 44px header and a footer that is 6% of the total height, you can achieve this using the CSS calc() function.
By setting your content width to be 100% - 6% (footer) = 94% - 44px (header), you can ensure that your layout will display as intended.
To implement this using calc(), use the following code:
.content {
width: calc(94% - 44px);
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding:0;
}
header {
height: 44px;
width: 100%;
background: red;
}
main {
height: calc(94% - 44px);
background: yellow;
}
footer {
height: 6%;
background: green;
}<header></header>
<main></main>
<footer></footer>I am attempting to grasp the concept of distinguishing between square brackets binding <elem [...]="..."><elem> and parentheses binding <elem (...)="..."<elem>. Is there a rule of thumb that can help differentiate between the two? Pe ...
I'm struggling to incorporate a GIF into my website, and after researching different sources, I've discovered that I need to utilize some Ajax and Javascript. However, I lack experience with both of these technologies. Is there anyone who could p ...
I'm currently developing a web application using Flask and Tailwind CSS, but I am facing an issue with importing custom fonts. Despite successfully building the CSS file, the HTML template fails to display the font as intended. How can I ensure that m ...
Task: My goal is to take an HTML string, make changes to certain attributes of image tags within it, and then return the modified HTML string. The function I have developed follows these steps: private resolveImagesInHTML (body: string): string { le ...
My struggle is with setting a background image to 100% width, as the image ends up getting cut off on half of the screen. The picture becomes wider than my display area. How can I resolve this issue so that the image width adjusts to fit the screen without ...
I am trying to display a caret on the right side of a bootstrap dropdown button inside a button-group. Here is the code snippet I am using: <div class="span3 well"> <div class="btn-group btn-block"> <a class="btn btn-primary dro ...
After importing NgbModule into app.module.ts, an error message is appearing: at ng-bootstrap.js:146 at Module../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js (ng-bootstrap.js:148) at __webpack_require__ (bootstrap:78) at Mo ...
After encountering a bug with a non-clickable video player inside a jquery ui dialog, I resolved the issue by changing position:relative; to position:inherit; Other solutions included removing position:relative; altogether or adjusting the z-index of the ...
When I click on the "Active account" button inside the designated td with the <tr id="tr_color" >, I want the value "1" to be added to the 'active_account' column in the database. I have been successful with this functionality. However, I a ...
Currently, I am in the process of learning vanilla JavaScript and I'm trying to incorporate a navigation feature similar to when the hamburger icon is clicked. However, I have encountered an issue where I cannot toggle the hamburger icon to change it ...
My <textarea> needs to fit into a space that is a percentage of the screen size, but I'm encountering some issues with different browsers. In FireFox, I am able to achieve good results by setting the CSS properties as follows: #container { width ...
Looking at the code provided, it's evident that creating and deleting new rows is a straightforward process. However, there seems to be an issue where the default/origin/first row (A-T) gets deleted along with the rest of the rows. The main requiremen ...
I am trying to wrap HTML around an existing div, here is what I have attempted: HTML: <input type="text" data-placeholder="username" /> It should look like this when rendered: <div class="placeholding-input"> <input type="text" data-pl ...
I received a successful ajax response from one HTML file, but I'm struggling to dynamically set the data from this response to another HTML file. Can anyone help me with this issue? Here is the code snippet from my ajax report: success: function( ...
Ensuring the correct size of a <canvas> element is crucial to prevent stretching, which can be achieved by setting the width and height attributes. Without any CSS applied other than background-color, I am faced with an unusual issue. Using ctx.draw ...
Why does Bootstrap fail to load when accessing the website from another computer on the same network, but works perfectly on my own laptop? Here are the comparison images: https://i.sstatic.net/oBu5j.jpg https://i.sstatic.net/XDRqj.jpg On my laptop: htt ...
My issue involves two modals: one that displays appointment information with a delete button, and another that serves as a warning before deleting. I want the delete-warning modal to overlay a backdrop on the modal beneath it, graying it out. However, both ...
Whenever the screen width is less than 576px, I notice that the menu icon on my website shifts its position along with the title (FOOD, LLC). How can I resolve this issue? Website: ...
Following a tutorial, I created an alert window with radio buttons added for user input. You can view the online demo here. The modified source code with the radio buttons is provided below. Below you'll find where I added the radio buttons and how I ...
Having trouble saving the array named $scope.tasks to LocalStorage while building a To Do List app. Tried multiple times but can't figure it out. Here's the code, appreciate any help :^) index.html <!DOCTYPE html> <html> <head& ...