As a beginner in CSS, I'm facing an issue with arranging divs.
I am trying to position one div at the top of the screen, 150px tall and 100% width, and another div right below it that should take up the remaining space on the screen.
When I set the height of the second div to "100%", it extends beyond the size of the screen, forcing me to scroll which is not what I want. I just want it to occupy the available screen space and adjust to the window size.
Thank you for your help!
#header{
background-color:gray;
height:120px;
}
#footer{
background-color:black;
height:calc(80vh - 120px - 10px) ;
}<div id='header'></div>
<div id='footer'></div>Currently, I am utilizing MDBootstrap as my primary CSS framework and integrating redux forms to simplify form management. The issue at hand is that the design and style of elements appear different compared to the original static html page layout. Here ...
I'm having trouble getting my navbar-right elements to align with my navbar-brand section. I need assistance with this. I want them to align, but here's how the element should look: https://i.sstatic.net/Fettu.jpg header.html <header> ...
Currently attempting to implement a 'previous image' button for my JavaScript slideshow. Below is the code I've put together: <img id="slide" height="300" width="300" src="images/1.jpg"> <br /> <button id="previous">Previo ...
Currently I am developing a bootstrap website using the "Butterfly" template. Everything is functioning properly except for the navbar when viewed on mobile devices. The dropdown menu fails to open on mobile devices, and I suspect it might be related to th ...
Looking to display a JSON file in HTML, but struggling with syntax for deeply nested objects. { "questions": [ { "question": "Qw1", "answers": [ { "answers": "An1", "value": 25 }, { ...
How can I trigger a function based on which button is clicked? I am working with an EJS file named test.ejs <form> <input type="submit" value="Click here 1"></input> <input type="submit" value="Click here 2">&l ...
Having some trouble utilizing enum values for list filters in Thymeleaf. I understand how to loop through enum values and compare them to constants. But, I'm looking to compare them to a 'variable' value instead. How can I accomplish this? ...
Why is the CSS color: #ffffff not applying to my SVG? This is how it currently looks: https://i.sstatic.net/qh7ng.png This is how I want it to look: https://i.sstatic.net/6tLo5.png Surprisingly, changing currentColor to #ffffff in the SVG itself works ...
I am facing a situation where I have a container with multiple elements inside it. These elements need to be justified and spaced out by a fixed amount (e.g. 20px). This means that the width of each element should adjust accordingly. For instance, conside ...
I need to update the checkSubmit() function to display the following messages: Passwords do not match Password is too short (minimum 4 characters) Height is not numeric I have successfully implemented the first check, but I am unsure how to approach the ...
My attempt to create a hover animation for a link using the ::after and ::before pseudo-elements resulted in the ::after element disappearing. I'm unsure of what went wrong, can someone help? Check out my code on JSFiddle. ...
Currently utilizing Behat to interact with form elements on a webpage. The structure of my HTML is as follows - I have a table with two required fields, one being an input, the other a textarea, and a checkbox. <table class="table"> <thead&g ...
Can you provide recommendations for a gallery suitable for my web project? The project utilizes: jQuery Bootstrap An ideal gallery would be based on jQuery. Here are the requirements and preferences: Compact CSS and JavaScript files. Utilization of the ...
My login page is functioning perfectly as expected. Instead of using a database of users, I have hardcoded the username and password within the code. However, the issue I am facing is that the login page is not displayed before the index.php page. Users c ...
I am currently developing a web application that allows users to create dynamic slideshows. However, I am facing an issue when trying to add images from the user's computer to the canvas. I have been using an input button to retrieve the file from the ...
I am facing an issue with my PHP contact form as it allows submission even if the fields are left blank. This has resulted in receiving multiple empty emails every day. How can I make sure that all fields must be filled out before the submit button can be ...
Recently, I've become intrigued by the idea of creating my own text editor similar to Google Docs, mainly out of curiosity rather than any intention of reinventing the wheel. One thing that has been on my mind is how applications like Docs and Zoho Wr ...
In my Ubuntu setup, I've been using chart.js to generate a graph displaying the values from a pressure sensor on an HTML document. Most of the project is complete, but I've encountered a challenge for which I haven't found a satisfactory sol ...
I am a beginner in HTML and I am trying to create a logout page that should have a design similar to this: https://i.sstatic.net/ld1R1.png I attempted to create it but I am struggling to position the icon correctly and I also want the whole content to be ...
I have successfully created 4 static HTML pages that include: Home About Services Contact Each page contains a link that leads to another static page named myVideo.html, which plays a video about me in a new tab. The link is available on every page so ...