This question already has answers here:
Css height in percent not working [duplicate]
(8 answers)
Closed 8 years ago.
Fiddle - http://jsfiddle.net/6axdexfj/
Once in a great while I come across a problem, and when I do I search to find a solution when I can't seem to figure it out myself.
So I'm building a web design app, and thoughout today I been reconstructing it so no garbage css is added in.
Today I added some simple styling to an element and I noticed that if I don't have position: absolute; or fixed on a standalone div that it's height is not changed when encoded with percent's.
.box1 {
width: 100%;
height: 50%;
background-color: rgb(0, 244, 85);
}
I noticed this years ago and still to this day I don't know why it does that. I always avoid it by applying the following to my body.
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Can somebody explain why this is?
Add this to your css and it should work
CSS
html, body {
height: 100%;
}
The problem is that your body and html container does not have the full height by default, thus your div by default will not have full height. To avoid this in the future, use reset.css to make your life easy :)
LINK TO reset.css
Related
This question already has answers here:
Can I change the height of an image in CSS :before/:after pseudo-elements?
(14 answers)
Closed 3 years ago.
I have the following line in my stylesheet that calls my website logo.
.navbar__logo::before{
content: url("../images/logo/logo.svg");}
How can I scale this down? I'm learning a bit about viewPort & viewBox but cant seem to get it to work.
Thanks in advance.
After declaring a viewBox in your svg file, you should definitely give your pseudo-element explicit width and height:
.navbar__logo::before {
content: url("../images/logo/logo.svg");
width: 200px;
height: 50px;
}
Beyond that, if you wish to dynamically resize your pseudo-element and / or animate the scaling you can use transform: scale():
.navbar__logo::before {
content: url("../images/logo/logo.svg");
width: 200px;
height: 50px;
transform: scale(0.5);
}
This question already has answers here:
Any way to declare a size/partial border to a box?
(6 answers)
Closed 3 years ago.
I'm doing some work on my website, I wanted to put that border thing with ::after(I don't want to do it with border-bottom because I want to set specific width) method, unfortunately when I'm trying to set the "::after" to position "absolute", and the container of it to position "relative", but the problem is the container somehow gets the position "absolute" which I don't want it to
I tried to set inline style but it doesn't give best performance.
HTML:
<h2 class="special-heading">Our Team</h2>
CSS:
.special-heading {
position: relative
}
.special-heading:after {
content: '';
display:block;
position: absolute;
top: 10px;
left:0;
width: 40px;
border-bottom: 3px solid #333;
}
I would try this instead of top: ...px
margin-top: 10px;
But not sure!
I think you can achieve what you want to achieve by replacing the line top: 10px with bottom: 0.
I tested it in codepen and the .special-heading got the position: relative properly.
This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
'position: sticky' not working when 'height' is defined
(3 answers)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 3 years ago.
I'm wondering if anyone has any ideas why I'm having problems with position:sticky inside a float-based layout, but not outside of it.
You can see a fiddle at: https://jsfiddle.net/pjt0kmd7/1/
I'm using the following css for the sticky position:
.sticky {
min-width: 200px;
height: 300px;
background-color: red;
color: #fff;
position: sticky;
top: 1em;
z-index: 10000;
}
I've also tried removing overflow and heights on the first sticky's parents via:
overflow:none;
height:auto;
But that has not made any difference. Anyone know why the first red box isn't sticky like the second?
Edit Looks like I figured it out, the sticky parent needs a height defined? https://jsfiddle.net/pjt0kmd7/4/
This question already has answers here:
Shrink a YouTube video to responsive width
(11 answers)
Closed 8 years ago.
I have small problem with parameter height of div which contain YouTube iframe (alredy responsive).
Background of player is set to 636px. When I resize the window player is scaling but not the space under it.
WEBSITE: http://www.kudlatyworkshop.com/motorsport/
The css for background:
#slider_container {
position: relative;
z-index: 1;
margin-top: -131px;
height: 636px;
and for YouTube:
.video-container {
position: relative;
padding-bottom: 52.25%;
padding-top: 50px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I tried to fix it by #media tag but it not this what I'm looking for.
Thanks for any help and sorry for my english.
Kuba
The height of the slider container never really changes. You need to specify (in each of your breakpoints) a height that looks consistent with the size of the video.
The reason you're having to specify a height at all is because the flex slider has position: absolute; (which may or may not be a requirement of the js running it) so it's rendered, but not within the document flow.
I'd say the quickest fix is either a) reconfigure your breakpoints and have more of them so the height can change more often to give a responsive appearance, or b) override absolute positioning from the .flexslider class with a .flexslider class of your own with position: static;
If the video is the only thing you're showing on this page, then you should be fine.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I was wondering if anyone could help me out fix my the top portion of my webpage to stay.
I have tried using the position:fixed attribute, but this hinders everything as then my content overlaps the fixed divs.
My website is here:
www.crookedcartoon.co.uk/print.html
I would like everything above the navbar, navbar included to stay glued to the top of the page and the content to scroll under it.
I realise this may mean i'll have to change the majority of my images to jpg instead of png. However, i was wondering if there was anyway around this? As in create a false line that the content scrolls under, then disappears, rather than reaching the top of the page, by where you will see it through the transparent parts of the PNG images. I don't want to use an iframe, really, unless this is the only way.
Thanks!
An iframe is certainly not the right choice here. Put a div around the stuff you want to have on top, put position: fixed on it and position it to the top left corner.
<div class="ontop">
<div id="top"></div>
<div id="logo"></div>
<div id="contact"></div>
<div id="navbar"></div>
</div>
After that, add some margin-top on #content-holder that equals to the height of .ontop. This is necessary because it is taken out of the document flow (because of position: fixed) and content will go under it.
If you also add background-color: white to .ontop, your transparency problems will be gone.
Tried to replicate your setup, here is a working demo.
you may try this
please update below css as i have updated the image by making the portion at the bottom transparent,making the top background white. [1 - DOWNLOAD IMAGE AND CHECK IT]
#ontop {
background: inherit;
height: auto;
margin-top: -10px;
position: fixed;
z-index: 10;
}
#contact {
background: none repeat scroll 0 0 white;
height: 45px;
margin-bottom: 1px;
margin-left: -5px;
margin-top: -8px;
position: relative;
vertical-align: top;
width: 1127px;
}
#logo {
height: 62px;
margin-left: -10px;
position: relative;
width: 1127px;
z-index: 1111;
}
]
1