Currently I have a few navigation <nav> tags. I have place the nav tag within a container with 100% width. But when I set the container height by a certain percentage the <ul> & <li> tag in the nav when click got cut off instead of scale down. How do I go about doing it?
here's my css code;
#container
{
position: absolute;
top: 30px;
left: 50px;
width: 100%;
height: 50%;
background-color: #000000;
}
below is my source code.
http://jsfiddle.net/eMLTB/107/
Instead of
height: 50%
can you just use
min-height: 50%
as this implies that the min-height will be 50% but it will not restrict it in case container has huge content that will be more that 50% height of the container
DEMO
http://jsfiddle.net/eMLTB/109/
Percentage is applied to whatever default height the browser sets for the page.
So If by 50% you mean the #container to be 50% of the page height then you must have this as well:
html, body {
height:100%;
min-height:100%;
}
Related
I need to have an absolute div that is a child of only body fill the entire document area (window + any scroll area)
-- width: 100% only fills the viewable screen
I prefer a CSS only solution but pure javascript is ok. I tried without success setting:
opaque.style.minHeight = Math.max(document.body.offsetHeight, document.body.scrollHeight);
I made a jsFiddle of the code below. If you scroll down the output, you will see that the opaque div stops at whatever height the output window was when it was rendered.
In case you are wondering... it is to make an opaque overlay of all content in the div behind it (think slideshow). My only other solution is to disable scrolling, but this is problematic.
Thanks for any help.
<div class="page-container"></div>
<div id="opaque"></div>
body {
width:100%;
}
.page-container {
position: relative;
max-width:978px;
width: 100%;
min-height:2500px;
margin:0 auto -50px auto;
border:solid #999;
border-width:2px;
background: lightblue;
}
#opaque {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: grey;
filter: alpha(opacity=70);
opacity: 0.7;
}
Can use
#opaque {
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
}
remove width:100% from body due to creates horizontal scrollbar
Depending on use case it is often common to add class to body when using such an overlay that sets body overflow to hidden
DEMO
You can put a position: relative on your body so that the body will be used as a reference point by the child element in terms of height (as opposed to the document object).
Using javascript to set one elements height equal to anothers
var o = document.getElementById('opaque');
var p = document.querySelector('.page-container');
o.style.height = window.getComputedStyle(p).getPropertyValue("height");
FIDDLE
I have a canvas in my page, and i want it to fill the page until it reaches the bottom of the page.
I have the canvas' width set to 100%, but i cannot set the height to 100% as it extends too far.
The position of the div is not 0,0 of the browser window there are other things above it, so i end up with a scroll bar because 100% height extends well below the bottom of my browser's output.
So i was wondering how can i extend the element's height to reach the bottom of the page from its current position on the web page?
<style>
.canvas{
position:absolute;
width:100%;
height:100%;
}
<style>
<div class="logo">Stuff here</div>
<div class="output">
<canvas class="canvas"></canvas>
</div>
Do i need to use JavaScript or is there a CSS method to doing this?
If you know the height of the content above the canvas, you can use top and bottom properties to take up the rest of the space:
JS Fiddle
.logo {
height: 40px;
}
.output {
position: absolute;
top: 40px; // height of above content
bottom: 0;
width: 100%;
padding: 0;
}
.canvas {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
And if you don't know the height of the above content, you can calculate it:
JQuery Example: JS Fiddle
var height = $('header').height();
$('.output').css('top', height);
this technique is also great when making resizable popups with fixed height headers and footers, but fluid height content
https://jsfiddle.net/ca5tda6e/
set the header (.logo) to a fixed height
.logo{
height: 100px;
background-color: lightGray;
position: relative;
z-index: 1;
}
then position the content (.output) absolute, with a padding-top: 100px
.output{
width: 100%;
height: 100%;
box-sizing: border-box; /* so that padding is included in width/height */
padding-top: 100px; /* padding-top should be equal to .logo height */
position: absolute;
top: 0;
left: 0;
overflow: hidden; /* there was like a pixel of something i couldnt get rid of, could have been white space */
}
I've had this problem before, in CSS, create this rule....
html, body {
margin: 0;
}
The goal is to define an aspect ratio (f.E. 4:3) for a DIV and all children of it, that have the styles WIDTH:100% and HEIGHT:100%.
This works fine, as long as I set the parent
WIDTH:100%
and then add to the first child a
PADDING-BOTTOM: 75%; // (3/4)*100
But if I resize my window to full screen on a 1080p monitor, the inner box will (sadly) correctly grow to be 100% in width and to 75% of the width, in height. Thus a 1920pixel wide div will grow to 1920x1440. On a 1080p screen this means, that I will have scrollbars to see the complete content of the div.
I'd prefer the inner box to only be (window.innerHeight / 3) * 4 wide and have a black bar on the left (and/or) right.
So I assumed that setting the height on the parent and then defining a padding-right on the child would have the same effect, but would give me the black bars on the right of the screen and not on the bottom.
But this does not work if you set the parent
HEIGHT:100%
and then add a
PADDING-RIGHT: 33% // ((4/3)-1)*100
to the children because the paddings are based on the containing elements width.
Now in a perfect world, I'd like to have my div, no matter what the height and width of the parent are, to be exactly 4:3, with black bars around it if neccessary , without ever being bigger in any dimension than the parent and thus creating scroll bars.
Is this possible with purely CSS? Or will I have to use JavaScript?
Edit:
with
<div style="width:133vmin;height:100vmin;margin-left:-66vmin;left:50%;background: #f00; overflow:hidden;">
I'm able to define a div that has 4:3 aspect ratio and has blackbars on the left and right, but if the height is not enough, it will not grow in size. Now I'd need to somehow combine both solutions...
I wrote a solution, but sadly it doesn't work with the latest stable Chrome, there is a bug filed: https://bugs.webkit.org/show_bug.cgi?id=94158
However it does work on Firefox 25.0 and Chrome Canary 36.0.1922.0
<html>
<style>
body {
margin:0;
background: #000;
}
#block1 {
display: inline-block;
position: relative;
width: 100vw;
max-width: calc(100vh * 1.33333); // (4 / 3)
}
#block1:after {
content: '';
display: block;
margin-top: 75%; // (3 / 4) * 100
}
#block2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: red;
}
</style>
<body>
<div id="block1"><div id="block2"></div></div>
</body>
</html>
Your CSS should look like:
#block1{
position: relative;
width: 100%; /* desired width */
}
#block1:before{
content: "";
display: block;
padding-top: 75%; /* initial ratio of 1:1*/
}
#block2{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
That should do it. Works cross browser back to IE8.
Comes form this great article: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
I am trying to make a light box style Jquery function. Unfortunately, the .container div that contains the image div (.lightboxbackground) I want to make pop out and enlarge has position:absolute and z-index: 10 so my pop up box and background fader only take up the width and height of that parent (.container) div eg:
Would anyone know a way around this so that my .lightboxbackground and .lightbox divs can cover the whole screen?
<div class='container'>
<div class='lightboxbackground'>
<div class='lightbox'>
<img src='image.jpg'/>
</div>
</div>
</div>
.container {
position: absolute;
z-index:10;
width: 200px;
height: 200px;
}
.lightboxbackground {
background-color:#000;
opacity: 0.9;
width: 100%;
height: 100%;
position:absolute;
z-index: 11;
}
.lightbox {
width: 500px;
height: 500px;
position:absolute;
z-index: 12;
}
if you want to cover the whole screen:
.lightboxbackground {
background-color:#000;
opacity: 0.9;
width: 100%;
height: 100%;
position:fixed;
left:0;
top:0;
z-index: 11; //I would advise to change this to z-index:1000 (Note: .lightbox must also adjust to this)
}
fid: http://jsfiddle.net/uH4MF/1/
.container is their "frame of reference", so to speak. 100% width and height of the descendants of .container means 200px for them.
Also, there is a way to attain 100% height. One of them is to to explicitly define height on html and body so you can have this reference.
And so:
Place .container as a child of body
<body>
<div class="container">...
Remove .container's width and height
Add the following style:
html, body, .container {height:100%};
I'm trying to create a fixed layout, with the sidebar's background extend to the far right. I drew a sketch to illustrate the image:
how would I go about extending the sidebar background to extend till the end of the right screen, on any window size? I tried with:
#sidebar {
z-index: 1000;
overflow: hidden;
position: absolute;
width: 100%;
background: url(../img/sidebar-base.png) no-repeat 0 -8px;
min-height: 200px;
&::after {
content: '';
z-index: 10;
display: block;
height: 100px;
overflow: hidden;
width: 100%;
background: url(../img/sidebar-rx.png) repeat-x 0 -9px;
position: absolute;
top: 0;
}
}
but a scroll would appear horizontally, and if I apply overflow:hidden on the body I wouldn't be able to scroll to the bottom. Thank you!
EDIT: I did try to find my luck with javascript but there's still a little scroll:
$(function(){
$sidebar = $('#sidebar');
$sidebar.css({width: window.innerWidth - ($sidebar.offset().left)})
});
If your problem lies only in the scrolling, you can easily fix this with this line
overflow-x: hidden;
and applying it to the background's parent or the body element altogether.
Is there anyone following here or not? anyway, I think you should static position and hidden overflow like below:
#sidebar {
z-index: 1000;
overflow: hidden;
position: static;
width: 100%;
height:100%;
right:0;
top:0;
margin:0;}
Also to hide the scrolls, you should hide your body overflow too.
Hope to be right and helpful...
Set body to 100%
body {
height: 100%;
}
Then set the sidebar height to "height: auto;". That will make it extend to the height of the viewport. From there, add fixed positioning like you said.
You could do:
overflow-y:hidden
That should get rid of the scroll bar across the bottom.
I would also then use a lot of right hand padding in the sidebar to extend it out.
Try setting the sidebar width to 30% and the content to 70%.
What you should do is create a wrapper div.
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here --></div>
</div>
Your document should look like this when finished:
<html>
<head>
<title>Experiment</title>
<style type="text/css">
.content {float: left; width: 49%; height: 500px; border: 1px solid #000;}
.sidebar-parent {float: left; width: 50%; background-color: green;}
.sidebar {width: 500px; height: 500px; border: 1px solid #000;}
</style>
</head>
<body>
<div class="content">blah blah blah</div>
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here -->blah blah blah</div>
</div>
</body>
</html>
The main thing to remember is the container div "sidebar-parent" is what's getting the width and containing the background.
To center them you'll need width: 50%; parent containers for both content and sidebar. You make those float:left; to fill the screen and then the content child container float: right; and the sidebar child container float: left; within their parent containers.
Summary: 2 50% width containers each containing 1 child container. Stack the parents together with a left float and then position the fixed width child containers within their parents.
That will center them and now you'll have the ability to have extended backgrounds.