I am working on a layout that requires three divs with different heights and header sizes to be positioned 100% from the top of their parent, while taking into account the height of the headers. I could use jQuery to achieve this, but since it's a responsive site, I prefer to stick to CSS solutions to avoid having to rely on $(window).resize(), which can sometimes be unreliable.
Is there a way to accomplish this using CSS3's calc feature?
Thank you for any help or advice.
To achieve the desired effect of having the orange container stick to the bottom of the blue container, you can consider adding content to the orange container and adjusting its position using CSS properties like position: absolute or margin-top, depending on your HTML structure.
You can then place the header (green) container inside the orange container and position it absolutely at the top with a percentage value of -100% (the orange container's positioning should be either absolute or relative).
If you provide your HTML code, it will be easier to offer a more tailored solution.
Here is a JSFIDDLE example demonstrating this concept
CSS:
.box{
background: #f00;
height: 150px;
width: 100%;
position: relative;
padding: 20px;
padding-bottom: 0;
}
.column{
background: #0f0;
width: 30%;
position: relative;
top: 100%
}
.header{
position: absolute;
bottom: 100%;
width: 100%;
background: #00f;
}
HTML:
<div class="box">
<div class="column">
<div class="header">
header
</div>
aaaaaaa<br/>
aaaaaa
</div>
</div>
Below is a method that can be used to align columns (works for any number of columns as long as they fit nicely):
body {
font: medium monospace;
}
.blue {
background: #AAF;
height: 12em;
text-align: center;
}
.helper {
display: inline-block;
width: 10em;
vertical-align: top;
position: relative;
top: 100%;
}
.green {
background: #CFC;
position: absolute;
bottom: 100%;
left: 0;
right: 0;
}
.orange {
background: #FCA;
}<div class="blue">
<div class="helper">
<div class="green">
1<br/>2
</div>
<div class="orange">
1<br/>2<br/>3
</div>
</div>
<div class="helper">
<div class="green">
1<br/>2<br/>3
</div>
<div class="orange">
1<br/>2<br/>3<br/>4<br/>5
</div>
</div>
<div class="helper">
<div class="green">
1
</div>
<div class="orange">
1<br/>2<br/>3<br/>4
</div>
</div>
</div>Experiment with this CSS style: height: calc(100% - nav_height);
After incorporating a new template on my Joomla website, I encountered an issue with the "submit an article" page. The fields in the publishing tab were altered to width: 0px;. Here is how the HTML for the category dropdown appears: <div id="jform_cati ...
Currently, I'm implementing a JavaScript function within Wordpress using Ajax to load the content of a post into a modal div when specific elements are clicked. Here is an example of how the JS function appears: function openProjectModal($that) { ...
I am struggling to arrange multiple images in my booking system as they are all displaying in a single column rather than the desired layout https://i.sstatic.net/1E8jO.png What I had hoped for was a layout like this https://i.sstatic.net/v8K34.jpg Curre ...
I've been on the hunt for a circular slider animation. Imagine it working like this: <input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" /> <span id="range">0</span> function showValue(newValue ...
I utilize (CSS 2.1 and jQuery) to customize file inputs. Everything is working well up until now. Check out this example: File Input Demo If you are using Firefox, everything is functioning properly. However, with Chrome, there seems to be an issue se ...
I'm currently in the process of setting up multiple drop down menus within a navigation element. The issue I'm facing is that when a user hovers over the menu items, the displayed elements appear below the first item instead of the selected one. ...
My goal is to create responsive rows of cards with some margin, but I am running into issues. When I use margin:5px; on my cards, the row overflows and they are not centered correctly. There seems to be extra space on the right side of the cards. How can I ...
I have created several HTML files. On the main page, I simply inserted some code like this: <a href="new.html> <img src="img/button" id="buttonid"> </a> When I click the button, it takes me to the new.html page. I would like ...
Having an issue with clicking a button at the top of the page. The CSS selector works fine in my local Eclipse environment, but when trying to run it on Jenkins server on my local machine, it fails with an error stating that the element is not clickable. T ...
Working on setting up a 'shopping cart' feature on our website, but running into some issues with the ASP code. Does anyone have any advice to offer? In the image below, you can see that when items are added to the cart, the 'total' is ...
I am currently exploring the ins and outs of angularJS with my simple message ticker example. This ticker displays messages by toggling the CSS display property of one of the li elements. <div id="ngtickerMessage" class="ngtickerMessage"> ...
I have 4 different divisions named outer, inner, title, and content. My goal is to place the inner div inside the outer div, with both the title and content divs positioned within the inner div, one above the other. I have set the outer and inner divs to b ...
Can I customize the styling of a div in accordance with a boolean property called "isActive" on my controller using Angular? <div class="col-md-3" (click)="isActive = !isActive"> <div class="center"> <i class="fa fa-calendar"& ...
I am encountering a minor issue where I am attempting to incorporate a simple image that can be toggled on and off by clicking on it. After coming across some bootstrap code online, I decided to test it in my project. Unfortunately, the code does not seem ...
For my current project, I am utilizing Clojure, ClojureScript, lein, shadow-cljs, Emacs, and CIDER to develop a dynamic web application. Typically, when building the project, I initiate the command cider-jack-in-cljs in Emacs, select shadow-cljs, opt for ...
Is there a way for Javascript to detect when a specific CSS media query is active without repeating the conditions of the media query in Javascript? Perhaps something similar to an HTML data attribute, but for CSS. For example: CSS @media (min-width: 94 ...
Currently in the process of migrating an app from CRA to NextJS, I've encountered an issue with the .module.scss files of certain components and pages: Syntax error: Selector ":global(.label-primary)" is not pure (pure selectors must contain ...
Creating grid elements in Bootstrap 3, I am faced with a challenge. When the viewport is below <768px, I want to align a button in the same position as shown in the image with the lion. Check out the demo site here. For viewports >768px, the button ...
I have recently implemented Panels from Bootstrap 3 with the older version of Twitter-Bootstrap. My challenge lies in adding the well class to the panel body, as it results in excessive padding. This was not an issue when using BS3, leading me to believe ...
It seems like my JQuery.click event is not functioning as expected when paired with the corresponding button. Any ideas on what might be causing this issue? Here's the HTML CODE snippet: <button id="jan7" type="button" class="btn btn-dark btn-sm"& ...