I am working on a CSS3 tabs (Without JS) and having a big problem.
I am trying to make auto height of absolute div so that it can expand or shrink height accordinly but for some reasons it is not working.
I tried to give 100% height to my html,body but still not working. Without putting in more words, Here is JS fiddle.
Here is my relevant CSS:
.content {
background: #3404FC;
position: relative;
width: 100%;
height: 200px;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}
.content div {
position: absolute;
top: 0;
left: 0;
/* padding: 10px 40px; */
z-index: 1;
opacity: 0;
}
As you can see blue background is height so why it is not taking auto height. I tried 100% but it is not working at all.
Please help!
You can try this:
.content div{
position: relative;
}/**instead of position: absolute;
you can selected div visibility: visible:
and none-selected div visibility hidden;
Even though you've set the height to 100% of the parent div, in this case content it won't have a height. The reason is, all of your child elements are positioned absolute. This makes the elements go out of the normal flow making the height of the parent div to 0px.
Use this :
body,html,.tabs{height:100%;}
Because you are using margin in tabs, its height will be more thant 100%.
Related
I have a Wordpress Template with a specific div being nested somewhere in the overall structure.
It has those stylings:
#fdm-ordering-sidescreen-tab {
position: fixed;
top: 25vh;
right: 0;
width: 64px;
height: 64px;
background: #fff;
color: #444;
border: 1px solid #ddd;
z-index: 101;
padding: 14px 12px 10px 12px;
cursor: pointer;
box-sizing: border-box;
}
I always thought that position: fixed; right: 0 should be absolute to the overall viewport, i.e. on the right side of the browser directly besides the scrollbar. But it isn't. It seems to be relative to its parent, i.e. right: 0 relative to some other centered div.
Can I, without changing HTML structure, move it to the very right side of the viewport, and if possible, also make it scroll with the scrolled viewport?
Thanks
This is caused by the fact that the containing div : <div class="fusion-text fusion-text-2" .... has transform: translate3d(0,0,0);
Your fixed div now becomes connected to the transformed element. It kind of treats the transformed element as the viewport.
Will wordpress let you move it out of the containing div?
Check out this SO post answer on this topic
And this : W3C Spec
I have a div (div1) inside some other divs. Now I want this div to have the same width as the body (take up full width of display), but always have the same height and position as its parent (div2). I've tried using position: absolute; on this div (div1). Then I can either
set body to position: relative; and have div1 take up 100% width, but now I'm having trouble making the height always follow div2.
or set the parent (div2) to position: relative; and have div 1 take up 100% height, but now I can't make it follow the width of body.
It would be cool if CSS had the option of saying:
.div1 {
height: 100%(.div2);
width: 100%(body);
position: 0(.div2);
}
Or something like that
JSFiddle with the relevant bits: https://jsfiddle.net/Hamleyburger/fqe5o46c/1/#&togetherjs=K02DaSO2nR
What I want is the div ".selectable" to have a div (inside?) that shows on hover and fits the heights of ".selectable" (parent) and the entire width of the body.
Extra, maybe relevant info:
I'm using Bootstrap and (Jinja2) templating. All the divs so far are taking their base widths from a wrapper container (.main) in my base template that I've set to be (responsively) narrower than body. If I were to remove .main
div I would have to set width on many individual divs. That would solve it (I could make all the divs that aren't div1 narrower), but it wouldn't be very DRY. I'm using SASS, if that helps.
It's possible to force a div to fill the whole viewport width using vw. It's a bit weird though:
body,
html {
margin: 0;
padding: 0;
}
.outer {
width: 300px;
height: 300px;
background-color: #eeeeee;
margin: 0 auto;
position: relative
}
.inner {
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner"></div>
</div>
I'd recommend to make your outer div full width and give the inner one a specific width:
body,
html {
margin: 0;
padding: 0;
}
.outer {
width: 100%;
background-color: #eeeeee;
position: relative
}
.inner {
width: 300px;
height: 300px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.1);
}
<div class="outer">
<div class="inner"></div>
</div>
I'm trying to pin a flexible DIV (centered, with max-width) to a header:
position: fixed;
top: 49px;
left: 50%;
margin-left: -50px;
It's working fine, but my flexible div is not "flexible" anymore (it's just max-width size). How can I get a flexible and sticky div at the same time?
Fiddle
I want the red one to be resizable and pinned to header
You could add a position: sticky; top: 0;, it will position the sticky at the top of it's parent. Lets say you where to put a hero just below the header, it will position at the bottom of the hero.
EDIT:
to make this browser compatible you should use a polyfill, there are a couple to choose from but here are two I used.
1) Filamentgroups polyfill fixed-sticky
2) wilddeer polyfill stickyfill
http://jsfiddle.net/shbcgac8/4/
.sticky-card {
position: sticky;
top: 0;
width: 100%;
max-width: 960px;
height: 150px;
margin: 0 auto;
background: red;
box-shadow: 0 2px 4px rgba(0,0,0,0.24);
margin-bottom: 24px;
}
Keep it fixed, keep it's max-width, and then just add width: 100%;
When you downsize the screen it will also resize down.
My Problem is that I have fixed div at the bottom on my page with disclaimer and so on.
This DIV is overlapping the vertical scrollbar so I have deleted the overflow from the parent element.
Now that is working but I need the overflow for the parent element to see the further content when scrolling the page.
Can someone help me?
Look at this:
jsfiddle
#scrollable
{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
margin:0;
padding:0;
}
div.bottom
{
background-color: #fa0000;
position: fixed;
bottom: 0%;
/*height: 10%;*/
height: 80px;
width: 100%;
margin:0;
padding:0;
z-index:9999;
}
div.test
{
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
position: absolute;
top : 10px;
background: #000000;
height: 1500px;
width: 100%;
margin-bottom: 80px;
margin:0;
padding:0;
}
You have to set the height of your container. The height should be such that it will just be enough for the disclaimer div to be visible. Then give the overflow:auto to the container. This will take care of scrolling and overlapping.
THe height can be calculated depending on the DOM structure of your page. But Please give proper height.
The concept of overflow is really simple, when your content "oveflows" a scrollbar appears if u have given overflow attribute. In your case, the overflow is occuring , but since the available height is more, it is going beyond your disclaimer div. Just make it less so that your disclaimer div and container div do not overlap. And you should be fine
If you had posted the code and page structure, it would have been simpler to explain.
I am currently working on a process site for my Web Design I class. Seeing that I have previous knownledge of HTML I didn't want to stick to a generic layout of my site.
That being said I have come across this problem in the past and just can't remember how to fix it.
http://bccvisualdesign.com/art271/simmons/index.html
As you can see if you resize the browser the div doesn't stretch once a scrollbar is introduced. I am wondering if it is my CSS for the div?
div.content{
width: 50%;
margin-left: 25%;
background: #FFF;
position: fixed;
top: 0;
bottom: 0;
padding: 0px 35px 0px;
-moz-box-shadow: 0 0 40px #000;
-webkit-box-shadow: 0 0 40px #000;
box-shadow: 0 0 40px #000;
}
The goal is to have the white div infinitely stretch top to bottom regardless of the scroll or not. Thank you all for your help!
Using position: absolute rather than position: fixed, as in your live example, you can get this to work by removing the bottom position, or changing it to bottom: auto, and setting a min-height: 100% on div.content.