I am facing a small issue that I need help with.
My problem is aligning an element to the top of a percent div with bottom: 100%, and I just can't seem to make it work within the parent div.
Essentially, I want bottom: 0% to align with the bottom of the div, and bottom: 100% to align with the top.
Any suggestions on how to achieve this?
UPDATE:
In the provided example, my goal is to align the gray bar to the top using 'bottom' 100%
I am having trouble understanding your suggestion of using bottom: 100%. Perhaps you meant to use bottom: 0; instead?
You can view the revised example at this link.
=== UPDATE ===
Thank you for your feedback, I believe I now understand what you are trying to achieve. The issue with setting bottom: 100% for the 'slider handle' is that it places it completely outside the parent div.
To resolve this, create a wrapper around the parent div with a height equal to the parent's height minus the slider handle's height, and add padding with the same height as the slider handle. Adjust the parent div's height to be 100%, and move properties like width, background-color, and margin-top to the wrapper as well.
Check out the updated examples for both bottom: 0% and bottom: 100% here: updated example and updated example.
This content appears to be dynamically generated, as using top: 0 would suffice otherwise.
If this is indeed the scenario, it is likely that you have something similar to:
child.style.bottom = y+"%";
In such a situation, you can easily include:
child.style.marginTop = (child.offsetHeight/100*y)+"px";
I am facing an issue where the border of my table is being cut off when using overflow: hidden. Below is an example code snippet illustrating this problem. <style> table { border-collapse: collapse; } table { ...
I've been grappling with this issue for a while now, and have had to rely on jQuery workarounds. I'm curious if there is a way to achieve this using CSS or LESS (possibly with javascript mixins). The page in question consists of both fixed and f ...
Encountering an issue with the Facebook like button alignment specifically in Safari on iPad. It displays correctly in Safari on OSX. Check out this example. Any ideas on what CSS is needed to ensure it's left aligned in one row on the iPad? ...
This particular issue sets itself apart from the common overflow problems that are often faced by people. Interestingly, I have only encountered this problem while using Chrome (Version 41.0.2272.101 64-bit). IE 9+ and Firefox, on the other hand, seem to b ...
As a newcomer, I recently acquired a bootstrap theme that comes with HTML, CSS, and JavaScript files. My goal now is to integrate this theme into Vue in order to make it fully functional. The challenge I am facing is how to successfully incorporate the the ...
I currently have a CSS collapse accordion created using pure CSS, and it is functioning perfectly. However, I am facing one issue: When the user clicks on any label - Label One, Label Two, or Label Three, they are unable to close it by clicking on the sam ...
I attempted to set the height of an IFrame to 100% (similar to setting a <div> to height:auto). I specified the height attribute in the <iframe> tag as 100% and also set the height in the style to 100%, but it doesn't appear to be functio ...
When testing my project on different screen sizes in Chrome dev tools or on my phone, I noticed a blue square briefly appearing around the button when it is clicked. I attempted to remove this by setting outline: none or outline: 0 on various pseudo-classe ...
I have a pair of buttons, #btn1 and #btn2, as well as two table rows, #tr1 and #tr2. The goal is to toggle the active state of the buttons when they are clicked by the user. The specific requirements are: When the button is set to active, the elements ...
If I have the following HTML, how can I dynamically adjust the width of all "thinger" divs? ... <div class="thinger">...</div> <div class="thinger">...</div> <div class="thinger">...</div> ... One way to do this is usi ...
Is there a way to add spacing between the rows of a table without affecting the columns? ...
When it comes to web development, there is often a debate on whether to use Bootstrap or custom CSS for designing a website. For my school project, I am tasked with creating a homepage and contact page using Bootstrap primarily. However, we are also requir ...
Working with JQueryUI draggable, I am interested in applying styling to the draggable element while it is being dragged. Various attempts have been made using code like this: $(".ui-widget-content").draggable({ drag: function(event, ui) { $(this).cs ...
Currently tackling a responsive website design challenge where I'm dealing with conflicting styles in media queries and parent css. Here's the CSS from the parent style sheet: .sec1 p { text-align: left; width: 55%; margin-left: 8%; float:lef ...
My goal is to incorporate a background video for VH1 and VH2 that remains fixed but stops at VH3. When a user opens the page, they will see #VH1 and the #videoBG as a background video. As they continue scrolling, they will reach #VH2 without the backgrou ...
I am currently using next version 13.4.5 and implementing routing with typescript through /app. On my first page, I have a <Link> (next/link) element that takes me to Page 2. However, when I use the browser back button to return to page 1, the layou ...
I'm experiencing a conflict because the header remains fixed only when I include the table-responsive class in my code. However, I also need the table to have overflow. Can anyone provide assistance with this issue? Using the table-responsive class ...
Trying to create a styled HTML list with CSS that resembles the following: 1. List item 2. List item 3. List item 3. List item 3. List item &nbs ...
I am looking for a way to decrease the opacity and overlay text on a thumbnail image when it is hovered over. I have considered a few methods, but I am concerned that they may not be efficient or elegant. Creating a duplicated image in Photoshop with the ...
I have a setup where I am using two DIVs, one positioned below the other. The top DIV contains a Multiline Label that dynamically generates data. However, when the data in the label exceeds a certain length, it does not create space and instead overlaps w ...