i have 2 divs and a dl:
<div id="wrap">
<div id="header">
<dl id="site_nav_global_primary">
and this is my style:
#wrap {
margin:0 auto;
width:100%;
min-width:760px;
max-width:1003px;
overflow:hidden;
}
#header {
width:100%;
position:relative;
float:left;
padding-top:18px;
margin-bottom:29px;
}
#site_nav_global_primary {
float:right;
margin-right:18px;
margin-bottom:11px;
margin-left:18px;
}
Now i want to change site_nav_global_primary to have a full screen width without
changing the wrap and the header. but when i try:
#site_nav_global_primary {
position: absolute;
width:100%;
top:0px;
left:0px;
}
The navigation gets the 100% of the wrapper which is max 1003px width. i want it to
stretch to the maximum without changing the wrap and header divs.
Is this possible?
You could set both left and right property to 0. This will make the div stretch to the document width, but requires that no parent element is positioned (which is not the case, seeing as #header is position: relative;)
#site_nav_global_primary {
position: absolute;
top: 0;
left: 0;
right: 0;
}
Demo at: http://jsfiddle.net/xWnq2/, where I removed position:relative; from #header
You need to add position:relative to #wrap element.
When you add this, all child elements will be positioned in this element, not browser window.
I have similar situation. In my case, it doesn't have a parent with position:relative. Just paste my solution here for those that might need.
position: fixed;
left: 0;
right: 0;
Adding the following CSS to parent div worked for me
position: relative;
max-width: 100%
Make #site_nav_global_primary positioned as fixed and set width to 100 % and desired height.
This one also works. With this method, there is no need to interfere with positioning of parent divs. I have checked
#site_nav_global_primary {
position: absolute;
width: 100vw;
}
I don't know if this what you want but try to remove overflow: hidden from #wrap
Related
I have a div class like so:
<div class="website-wrapper" data-content="63%"></div>
I have javascript that changes the data-content:
$(this).children().closest('.website-wrapper').attr('data-content', (imageHeight/imageWidth*100)+"%");
And I have my css declaration like this:
.website-wrapper:after { padding-top: attr(data-content); display: block; content: ''; }
For some reason, I can't get the padding-top to work correctly. Is there something I doing wrong?
As far as I know attr works only with content property currently, so you can manipulate only it. You can see browser compatibility here and more detail info - https://developer.mozilla.org/en-US/docs/Web/CSS/attr
.website-wrapper:after {
content: attr(data-content);
}
<div class="website-wrapper" data-content="Hello"></div>
If you include a wrapping div you could use that to set your padding-top to maintain you aspect ratio. Just set that wrapping div to position: relative; and the inner div with the background-image can be set to position: absolute; top:0; bottom: 0; left: 0; right: 0; in order to take up the full space of the containing div which is creating the aspect ratio.
HTML
<div class="outer">
<div class="website-wrapper"></div>
</div>
CSS
.outer{
position:relative;
}
.website-wrapper{
background-image: url('https://placehold.it/800x450');
background-repeat: no-repeat;
background-size:contain;
position:absolute;
top:0;
bottom:0;
left: 0;
right: 0;
border:1px solid red;
}
JS
$(this).children().closest('.outer').css('padding-top', (imageHeight/imageWidth*100)+"%");
See this fiddle for a demo.
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 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%};
This dreaded problem.
What I currently have
html:
<html>
<body>
<div class="wrapper"></div>
<div class ="footer"></div>
</body>
</html
css:
* {
margin: 0;
}
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0;
}
.footer
height: 36px;
}
The problem is when i inspect the rendered page with chrome a few problems I see:
1. The html tag has a height associated with it hmmm and its not the entire page height
2. so I have div inside of the wrapper div that extends past the wrapper, body, and html tag?
My best guess is that if i can get the html to the page height I could style the footer to page bottom.
I was considering using javascript to grab the true height in pixels and passing that to height and ditching the percent. Only problem is I still want to know whats going on!
Thanks,
JT
add this css to your wrapper divs
wrapper_div{ overflow:hidden; }
this is a hack to recalculate floated elements inside an element. Otherwise the browser will forget about the floated elements, overflow-hidden does the trick or you can append a clear floated element to the bottom of the wrapper div like so
CSS
clear_float{
clear:both; display:block;
overflow:hidden; visibility:hidden;
width:0px; height:0px;
}
HTML
<div class="wrapperdiv">
/* other HTML elements*/
<div class="clear_float"></div>
</div>
this is assuming that the troublesome div is classed wrapperdiv
on second look this is completely invalid
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
}
you are setting the height twice in one declaration. height: auto !Important will take precedent over height: 100% so you need to decide whether you want your height automatically rendered over explicitly at 100%.
and your missing the opening block in this css declaration
.footer
height: 36px;
}
Just before the closing tag of the wrapper add a div with the class 'clear'
CSS:
.clear { clear: both; }
.footer { margin-top: -36px; }
The problem is that floated elements behave like absolute positioned elements.. They are not taken in account when calculating the height of the wrapper div.
In the end I just made the html body tags set via pixels and not percent. Nothing I tried above satisfied me.
If you want a facebook like fixed footer status bar. Try using the following css:
.footer {
width: 100%;
height: 25px;
position: fixed;
bottom: 0px;
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.