I have this layout in my html page body
<div id="main">
...
<div id="menu">
</div>
...
</div>
<footer>
css for main:
#main {
width:100%;
min-height:100%;
height:100%;
background-color:#cacaca;
background-size:cover;*/
position:relative;
display:block;
z-index:0
}
The div with id menu is a vertical navigation menu which can extend vertically. Its position is set to absolute in css.
Now I have this problem: if the menu extends, it may overlap with the footer below because the main's height is not extended accordingly. One solution is to set the height of main to be the biggest possible value after the menu is extended, but that is not optimal. My question is how can I make the main area's height grows according to its menu descendant with css so that the overlapping won't happen? Thanks.
Like I said in the comment there isn't anyway to do this with only css.
Using jquery this line will do it.
$('#main').height($('#menu').height());
You could do it on page load or if the size of the menu is changing put it in the code that changes the size of the menu or put it in a timeout:
setTimeout(function(){
var mainHeight = $('#main').height();
var menuHeight = $('#menu').height();
if(mainHeight < menuHeight) {
$('#main').height($('#menu').height());
}
},2);
Related
I need put a "carousel" div inside "oe_structure" but not work correctly, the "carousel" :
I'm editing the template "website_sale.products"
I am new to odoo, can I inherit in my direct code to edit the ? but I still don't know how to put the slider inside the div as shown in the image!
link of the code I use:
https://codeshare.io/2pBqez
My error with div carousel is:
<div class="container">
<div class="square"><div>
<div class="s-square">
</div>
.container {
width:80%;background:lightgray;height:500px;margin-left:10%;
display:flex;justify-content:center;align-items:center;
} /* this container is positioned using a left-margin */
.square {width:250px;height:250px;background:white;position:relative;} /*this square is positioned by the flexbox display of its parent container (.container) */
.s-square {height:100px;width:100px;background:blue;position:absolute;top:50px;left:60px;3px dashed purple;} /* this is absolute positioning and should be avoided as much as possible b/c not very responsive-friendly */
I'm trying to make 2 div's inside a container div (from Twitter Bootstrap) take the max height which is 100%.
I created a fiddle to demonstrate, but somehow it's not showing what I want.
Both div's are floated. And therefore I used class="clearfix". But that didn't work either. What am I missing?
EDIT
What you don't see in the fiddle, is that html and body are already set to 100% height in my application.
EDIT
The child div goes outside it's parent div, and that's why it keeps failing.
The jsfiddle has been updated. Anyone can take a look at it?
To make a nested block-level element take up 100% height even without any content inside of them, one needs to add height: 100%; to the element in question and all its parent elements (including html and body). See this demo.
Giving the divs a height works just fine, but because there is no content inside, the html and body elements don't stretch accordingly.
HTML:
<html>
<body>
<div class=container>
<div class=stretch-this>
</div>
</div>
</body>
</html>
CSS:
.stretch-this {
background-color: khaki;
}
html,
body,
.container,
.stretch-this {
height:100%;
}
Right now I have a main div with an id of "wrapper", and inside this div I am trying to make two other divs that take up about the entire width of "wrapper". The first div, "sidebar", is narrow and contains some information I want displayed on the far right of "wrapper". The second internal div I have will be dynamically updated using php and javascript from data inserted by users, id called "maincontent".
I can get them positioned inside "wrapper" fine at first. The problem comes when new content is added in the "maincontent" div. When new content is added the "sidebar" div will move down proportionally to the height of the newly added content.
So, my question is this:
How do I get the two internal divs to maintain their positions on the top of the page while still being able to extend dynamically downward without anything moving around?
you need to float:left your left-content:
see the css below:
.wrapper
{
margin:0;
padding:0;
top:10px;
width:100%;
height:500px;
background-color:yellow;
}
.left-content
{
position:relative;
width:20%;
background-color:red;
height:100%;
float:left;
}
.main-content
{
position:relative;
width:80%;
left:20%;
background-color:green;
height:100%;
}
where your divs are as below:
<body>
<div class="wrapper">
<div class="left-content">
</div>
<div class="main-content">
</div>
</div>
</body>
what's important is, you accurately divide the width of the parent to the child containers
i.e. total width of child containers <= parent width
see, you need to learn about position attribute of css-style
when you do position:relative for any container, css properties like top, left,right,bottom starts working for them.
Check out my fiddle, the Javascript is completely unnecessary. Let me know if it helps you, or if you have any questions left. The most important part is having float: left or float: right in both the maincontent and sidebar.
http://jsfiddle.net/y89zp/
If I have 2 div tags:
<div id="parentDiv">
<div id="childDiv"><!-- other html --></div>
<!-- parent div html -->
</div>
I want the content of <div id="childDiv"> to overlap the content <!-- parent div html -->.
Reason (in case this looks like bad code design to anyone):
I need a hack workaround in google sites, I cannot add custom code on the sidebar nav, only in the main html space, I want to float a div that takes no space and relatively position it over the side bar to get around the forced limitation.
I can do everything except stop the childDiv from taking up space in it's bastardized main-page container.
You can give it a position absolute, and navigate it with margins.
#childDiv {
position: absolute;
margin-top: -100px;
margin-left: -100px;
}
How about a simple
#childDiv {height:0; overflow:visible;}
But you probably want it to have a background colour, hm? Hm.
#parentDiv {
position: relative;
}
#childDiv {
position:absolute;
top:0;
left:0;
width:100%;
}
If you need to bump the content around, or overlap stuff that is 'outside' of the sidebar, you can use negative margins to increase the width of the childDiv or move it up (to cover padding or margins you can't override).
If you need to make the #childDiv cover the entire #parentDiv, you can use a bit of JavaScript to set a min-height on childDiv, then add a colored background or something to cover any content.
var parentHeight = jQuery('#parentDiv').height();
jQuery('#childDiv').css('min-height',parentHeight + 'px');
You have to take the childblock out of the flow. The best way to do this is position: absolute on the child div and position: relative on the parent div.
I have a fixed height scrollable <div id="overlay"> positioned over all the page elements using position:fixed. In the div I have elements higher than the fixed height, so the scrollbar appears. I also have a tooltip that I want to stay with a paragraph even if it is scrolled.
That's what I want to happen here, but unfortunately neither of my solutions work properly:
I add position:absolute to the tooltip and position:relative to #overlay(the tooltip's parent): http://jsfiddle.net/4qTke/
The tooltip scrolls as expected but it is not visible outside of #overlay.
I only add position:absolute to the tooltip: http://jsfiddle.net/Yp6Wf/
The tooltip is visible outside of the parent #overlay but doesn't move when the div is scrolled.
I want the tooltip to always be visible AND for it to move when scrolled.
What you want is not possible using just CSS and HTML.
The main problem you have is that you have set overflow: scroll on the container your #tooltip is relative to. Because this overflow property is stopping any content from appearing outside of its edges when you position #tooltip "outside" of the div it will be hidden and only visible when scrolled to.
The reason it was visible in your second scenario is because without setting position:relative your #tooltip was relative to the page and not the container. Which meant it was not affected by the overflow:scroll property of the container.
HTML:
<div id="overlay">
<div class="elemRel">
<div class="elemAbs">
<!-- Your Code -->
</div>
</div>
</div>
CSS:
#overlay { position:fixed; }
.elemRel { position:relative; }
.elemAbs { position:absolute; }
Maybe this is an alternative for you? See demo fiddle.