I am trying to understand a problem I am facing when moving my application from one area to another. I was previously testing my HTML in an isolated test application and have got it to a stage where I am happy with it. So I began integrating it into the correct place. When doing this I found I am having a curious CSS problem as the div elements no longer appear to be inheriting the dimensions of the child divide.
I created a JSFiddle in order to demonstrate the problem, code also provided below.
Working backwards, the outermost div with the style attributes hard-coded for height and width (100px) appears to have a computed style that I would expect.
Happy so far. We can see 100px for height and width.
The div with the class child also appears to inherit the dimensions from the child content, as I would expect. We see 100px for height and width.
So far, correct behaviour.
However, this is where my knowledge of CSS falls down. The div with class parent appears to lose all width and height information from it's content and so the user sees nothing in the browser as the size for these div's essentially becomes 0px and the content is hidden.
The question I have, is why does the width and height not get inherited from the children of the div element with the parent style class.
HTML
<div class="grandparent">
<div class="parent">
<div class="child">
<div style="height: 100px; width: 100px; background-color: black;">hello</div>
</div>
</div>
</div>
CSS
.grandparent {
height: auto;
position: absolute;
margin: 0;
overflow: auto;
display: block;
background-color: red;
}
.parent {
position: relative;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
background-color: green;
}
.child {
height: auto;
position: absolute;
margin: 0;
overflow: auto;
display: block;
background-color: blue;
}
pros and cons for it but position:absolute; in this case is the problem:
http://jsfiddle.net/CyubA/1/
.child {
height: auto;
position: relative;
margin: 0;
overflow: auto;
display: block;
background-color: blue;
}
Related
I have tried a lot of things and searched online but I cannot figure out the solution to this problem.
I have a div container which has a max-height, min-height and also overflow: auto. When the inner content is larger than the max-height, a scrollbar appears as expected. But, inside the content there is a dropdown, which when clicked, the menu expands, and instead of being displayed outside the parent container, it is like changing the inner content height.
The only solution I found online and made sense to me, is to wrap the container to div with relative positioning and make the dropdown absolute, but there is a big drawback now, the dropdown stays fixed on scroll, as it is absolute positioned relative to the wrapper and not the content. Is there any common way to fix this or any other solution ?
I didn't post any code because I do not want the answer to rely on my code.
I just want a minimal example if possible with these properties:
Container has a max-height
If content is larger than the container's max-height then the container should display a scrollbar.
The content has a dropdown which should scroll with every other element of the content.
The menu options of the dropdown element are escaping the container / are displayed outside the boundaries of the container.
To illustrate on my comments on the question, here's an MCVE:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
position: relative;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
left: 300px;
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
As you can see, with absolute positioning based on the relative position of div.content the orange div.dropdown creates a horizontal overflow, which is what you don't want. To fix this scenario, you need to remove position: relative from div.content and use transform: translateX(300px); instead of left: 300px;:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
transform: translateX(300px);
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I have a parent div and two child divs. The second child div is variable height, but is absolutely positioned at the bottom of the parent div.
I want the first div to have a dynamic height based on the second div. I thought margin-bottom: 10px would specify the height of the first div to go up until 10px of the second div, but apparently this is not true.
Is there any workaround to get what I want?
HTML:
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >
</div>
</div>
CSS:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%;
}
JSFiddle:
https://jsfiddle.net/4tjqsron/2/
The margin-bottom is only telling the browser "don't let anything come within 10px of the bottom of me," as you found out.
I think this may be an excellent opportunity to use the calc() css function!
Try this:
.first {
background-color: green;
height: calc(100% - 110px);
}
This should leave a 10px space between your first and second child element.
Basically it is telling the browser that the first element is to take up 100% of its parent minus 110px.
Please see this for more info on the calc() function.
https://www.w3schools.com/cssref/func_calc.asp
I hope this helps!
EDIT: It just occurred to me that this only works if your height is set elsewhere. You may need to adjust your use of the 100% argument depending on your current parent height settings. Even if this is the case, the calc() function should still prove useful.
I am not get your point very clearly, here is my solution that div.second will always align on the bottom of div.parent vertically:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
/* height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%; */
max-height: 100%;
position: absolute;
top: auto;
bottom: 0;
}
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >No matter how many content in this div, it will always lie on the bottom of the parent div</div>
</div>
I have a parent with auto height (in example I added height 300px for testing pupose) and child element with position: fixed. Is it possible stretch parent elem as long as child even if child has a fixed position?
<div class="parent">
<div class="fixed"></div>
</div>
.fixed {
position: fixed;
height: 750px;
width: 100%;
background: red;
opacity: 0.5;
margin: auto;
}
.parent {
height: 300px;
background: yellow;
}
Example here
https://jsfiddle.net/hz0wgx1w/
I can't think of a way to do this with CSS alone, but here's an example using jQuery to update the CSS so that the parent's height and width match the child's:
https://jsfiddle.net/hz0wgx1w/13/
Keep in mind that with the child fixed, it will not scroll in sync with the parent, so this only works to set their initial sizes to match. It does not ensure that their positions will continue to match while scrolling.
This also does not take responsiveness into account, so any change to the width of the child after page load will not cause the parent to update, though that could easily be accomplished with jQuery as well, depending on your objective.
I preserved your HTML, but it would be safer to use distinct IDs rather than classes if you plan to reuse these classes on other elements.
$(".parent").css("height", $(".fixed").css("height"));
$(".parent").css("width", $(".fixed").css("width"));
.fixed {
position: fixed;
height: 750px;
width: 100%;
background: red;
opacity: 0.5;
margin: auto;
}
.parent {
height: 300px;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="fixed"></div>
</div>
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}
I'm working to center #child within #parent at 100% height and width. Why does setting the #child top position to 10% work, but using 10% as a margin-top does not?
http://jsfiddle.net/rbtstudio/SCmfG/
<style>
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
}
#parent {
width: 100%;
height: 100%;
background-color: #323232;
}
#child {
width: 80%;
height: 80%;
background-color: #eaeaea;
margin: 0 auto;
position: relative;
top: 10%;
}
/*
#child {
width: 80%;
height: 80%;
margin-top: 10%;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
*/
</style>
<div id="parent">
<div id="child"></div>
</div>
The issue here is called "collapsing margins". You can read more about them in the css spec.
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
It's not that the margin isn't working, it's that the margin is collapsing, causing the margin to apply to the top of the parent box.
You'll notice that when the margin is applied to the child, the parent is moved down.
http://jsfiddle.net/SCmfG/4
One workaround (of many) to avoid the collapsing of margins is to add overflow: hidden to the parent element:
http://jsfiddle.net/SCmfG/5/
EDIT: Another important point to keep in mind (which was in another answer which has since been deleted) is that all percentage margins are based on a percentage of the width of the element, even top and bottom.