I need assistance in designing an HTML layout with a fixed toolbar at the top and bottom, along with a single centered DIV that should be responsive when the user resizes the window both vertically and horizontally. I have attached a mockup/screenshot for reference.
Could this be of assistance?
html, body{
margin: 0;
height: 100%;
background-color: #555;
}
#topToolBar{
position: absolute;
top: 0;
height: 50px;
width: 100%;
background-color: #ccc;
}
#bottomToolBar{
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background-color: #ccc;
}
#centerDivWrapper{
width: 80%;
height: 100%;
margin: 0 auto;
}
#centerDiv{
padding: 55px 0;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#centerDivContent{
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
border: solid 3px #000;
overflow-y: auto;
}<div id="topToolBar"></div>
<div id="centerDivWrapper">
<div id="centerDiv">
<div id="centerDivContent">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div id="bottomToolBar"></div>I am attempting to modify the text displayed on a button within a plugin by using jQuery. Here is the outer HTML: <button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour"> <span class="ladda-label"> <i class="ab-hour ...
Although I am not well-versed in PHP, I managed to create a code to display parcel descriptions below the price of products. The issue I am facing is that my code is calculating too many decimal places and not displaying the default currency, which should ...
Here's a snippet of code from the CSS file: .scroll-bar .button { visibility: hidden; -fx-background-color: black; } Despite this code, the scroll bar buttons are unaffected. You can see an image of the issue here. I would greatly appreciate any hin ...
While I understand that similar questions have been asked numerous times before, I have yet to find a solution that fits my specific needs. My question is regarding how to retrieve the current date and time from the internet rather than relying on the loc ...
I am currently working on a menu of buttons where users can select multiple options at the same time. My goal is to record all selected buttons in one array instead of individual arrays for each button. The end result I hope to achieve is an array like t ...
I am struggling to change the brown background color on my website. Despite updating various color values in the CSS file such as'backgroundcolor', I seem unable to make any changes. I have tried altering multiple color entries, but nothing seems ...
Currently in the process of refactoring a website and updating the rrd to v5, since the old version had components that no longer exist. We now need to work with the new component, as many are aware. Previously, I utilized framer-motion for transitioning ...
After some tweaking, I was able to create buttons that trigger dropdown menus which disappear when clicked off. However, a problem arises when any button is clicked - all of the dropdowns appear at once. It appears that setting the state for one button a ...
Is there a way to move HTML elements without the use of padding, as I need a border for color and want to avoid collapsing with other elements in the structure? Or is this the only option and should I just avoid colliding with other elements? "Margin is t ...
My website is almost complete, but I am facing some challenges with the mobile version. All buttons that use JavaScript are not functioning properly, whereas buttons with simple links work perfectly fine. This issue doesn't occur on Chrome when using ...
Struggling to get a standard opt-in form to work with an image submit button. The script works fine with a regular submit button, but the image button requires two clicks initially and then one click after unless the page is refreshed. I believe there mig ...
I am just starting to learn JavaScript, so I am not yet familiar with all the commands involved. I have a code that includes a button which scrolls back to the top of the page, but I was wondering if there is a way to change the position of that button bas ...
Looking for assistance in extracting data from the following RSS feed: <rss xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0"> <channel> <title>This is a test</title> <link>http://somelink.html</link> ...
I have a total of 5 select option drop down menus currently, but this number may increase in the future depending on requirements. The issue I'm facing is that when I select the last element, it returns true even though the other elements are empty. I ...
Looking for assistance in moving the scroll location onClick of another div using jQuery. The image is a sprite. .top-background{ background: url("../images/mainall.jpg") no-repeat scroll 0px 0px transparent; height: 888px; width:1024px; } ...
I am diving into the world of Sass and I have a peculiar challenge. I want to create a class that allows me to set a color using percentages for red, green, and blue values. For example, the class name color-50-10-60 would represent 50% red, 10% green, a ...
Is there a way to adjust the drop-down menu positioning so that it aligns with the button on the top right side of the menu pop-up, rather than the top left as it currently does? Below is the code I have borrowed from an example on W3Schools. .dropbtn ...
Within my Angular2 application, I am facing an issue with displaying multiple instances of a child component - app-video-container - in a grid layout using inline-block. The parent component generates these instances using an ngFor loop but they appear sta ...
Recently, I came across a curious behavior regarding browser scrollbars. To see it in action, check out this link. HTML: <div class='container'> <div class='fix' /> </div> CSS: body { margin: 0; } .container ...
I am currently working on a weather forecasting website where the API returns pure JSON data. However, when I convert this data to a string and add it to an element in order to display it on the webpage, I encounter a problem with double quotes appearing. ...