I want to have a yellow rectangle #box-over across the entire screen at width 100%.
At default zoom level on Google Chrome (I've not tried all browsers) it works fine unless I zoom in beyond 300% or so then that yellow box no longer is 100% of the screen it gets clipped and a horizontal scroll bar appears at the bottom.
I can't seem to figure out how to fix this behavior.
JSFIDDLE
http://jsfiddle.net/VySGL/1/
SCREENSHOT
SOURCE
<style type="text/css">
body {
padding: 0;
margin: 0;
background-color: black;
}
#box {
width: 100%;
position: relative;
}
#box #box-over {
z-index: 1;
width: 100%;
height: 50px;
background-color: yellow;
position: absolute;
top:10px;
opacity:0.8;
}
#box #box-over .box-column {
width: 900px;
margin: 0 auto;
zoom: 1;
position: relative;
height: 50px;
}
</style>
</head>
<body>
<div id="box">
<div id="box-over">
<div class="box-column">
</div>
</div>
</div>
</body>
</html>
An alternative for using 100% width is to set left and right to 0 in CSS like this...
See JSFiddle
#box #box-over {
z-index: 1;
left: 0;
right: 0;
height: 50px;
background-color: yellow;
position: absolute;
top:10px;
opacity:0.8;
}
#box #box-over .box-column {
left: 0;
right: 0;
margin: 0 auto;
zoom: 1;
position: absolute;
height: 50px;
}
Using the left and right properties ensure you never exceed 100% width even when you add padding (See this JSFiddle).
For example when you add padding to your div it will be 100% plus the padding. See JSFiddle
Your inner 900px div overflows the outer div's 100% width when you zoom. You can give a max-width:100% to .box-column:
#box #box-over .box-column {
[...]
max-width: 100%;
}
Fiddle
This will force the inner div to respect the container's width.
Another solution is to set the #box-over's overflow to hidden or scroll. This way the inner div will still have 900px width equivalent in aspect ratio.
Related
I want to position a <div class="container"></div> in the middle of the screen in such a way so that it's responsive to any screen size. The red marked area on the screenshot should always appear in the middle of the screen.
How to position it? Currently I'm using margin-top:85px when I squeeze the browser, the distance between the red marked area and the navbar should decrease as well.
Have you tried absolute centering? You would need to add a position relative to the parent container... You would also need to declare a height on the container element...
.parent-container {
position: relative;
}
.container {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
I hope this helps...
Working code snippet has been added. This code will centre your div both horizontally and vertically for any screen size.
Set the css property position:relative for parent of the container.
.container {
width: 400px;
height: 300px;
background-color: #ccc;
position: absolute;
/*it can be fixed too*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*this to solve "the content will not be cut when the window is smaller than the content": */
max-width: 100%;
max-height: 100%;
overflow: auto;
}
<div class="container">
</div>
Try with this example
.container {
width: 75%;
margin: 50px auto 0;
}
Define some width on your container and set margin top & bottom to some desired value and left & right values to auto so that it will always split the remaining space on the both sides equally.
.container{
width : 84%
margin : 2rem auto;
}
Use this in your container class
.container{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:auto;
height:200px; /****set height****/
margin:auto;
}
It will work
I have a three-column layout that takes up 100% width and height of the browser (with padding). This layout contains two columns which also take up 100% height and should scroll independently.
Here is a jsfiddle: http://jsfiddle.net/KdZ9A/2/. Here is how it looks in Chrome (desirable -- individual columns scroll):
and Firefox and IE (undesirable -- body is scrolling):
This works perfectly in Chrome; however, the in Firefox and IE (10), the entire page scrolls instead of individual columns scrolling. I only want the columns to overflow and scroll -- not the body. Any idea how to make this work in Firefox and IE?
I've also tried a bit different approach using absolute positioning of the columns' contents: http://jsfiddle.net/KdZ9A/3/.
Here is the HTML I am using:
<div id="container">
<div id="inner">
<div id="palette">palette</div>
<div id="list">
<div class="content"></div>
</div>
<div id="editor">
<div class="content"></div>
</div>
</div>
</div>
I'm using absolute positioning to achieve 100% height and then display of table and table-cell inside that to achieve 100% height of the columnns:
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#container {
background-color: #f1f1f1;
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
#inner {
display: table;
height: 100%;
}
#inner > div {
display: table-cell;
}
#palette {
min-width: 180px;
max-width: 180px;
width: 180px !important;
background-color: pink;
}
#list {
width: 55%;
min-width: 350px;
background-color: cyan;
}
#editor {
width: 45%;
min-width: 400px;
background-color: magenta;
}
.content {
overflow: auto;
height: 100%;
}
I was 5 minutes from giving up and HOLY CRAP...I GOT IT WORKING
http://jsfiddle.net/gFX5E/15/
This is based on the different approach I mentioned. I needed to wrap .content divs and make the wrappers position relative. I also added some headers to the columns.
HTML:
<div class="content-wrap">
<div class="content">
...
</div>
</div>
CSS:
.content-wrap {
position: relative;
height: 100%;
}
.content {
overflow: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
Seems to work in Chrome, Safari, Firefox, and IE8+.
And here is a more semantic HTML5 version which also adds a header to the top: http://jsfiddle.net/gFX5E/20/. I believe this will require use of html5shiv to work in IE8.
If you are willing to settle for a fixed total width, here is how:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* makes filling up easier */
}
html, body {
height: 100%;
}
#container {
position: relative;
width: 980px;
height: 100%;
margin: auto;
background: grey;
}
#palette {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 800px;
background: pink;
}
#list {
position: absolute;
left: 180px;
top: 0;
bottom: 0;
right: 450px;
background: cyan;
overflow-y: auto;
}
#editor {
position: absolute;
left: 530px;
top: 0;
bottom: 0;
right: 0;
background: magenta;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="palette">Palette</div>
<div id="list" class="content"></div>
<div id="editor" class="content"></div>
</div>
<script>
$(function() {
for (var i=0; i<20; i++) {
$('.content').append('<p>Lorem ipsum [truncated for SO]</p>');
}
});
</script>
</body>
</html>
Demo on this Codepen: http://codepen.io/anon/pen/aqgCm?editors=100.
This is a pretty old post, but I thought I'd comment.
If you display: flex instead of display: table in your 1st example that should fix the issue.
Also setting your scroll container height to 100vh will also do the trick.
You have to understand that the browsers apply scroll only when they understand the size( i.e. height and width) of the content is greater than the size specified for it. In your case, the height you have specified for the div is 100%. This effectively tells the browser to keep increasing the size of the div till all the content fits in completely. Hence, this creates the situation where scroll isn't needed as the browser would 'fit' the entire content within this div.
So if you want the div (or the paragraphs contained in it) to be scrollable, then you would have to specify the height and then tell the browser to provide a scroll for the content that won't fit in the specified size.
I am not sure if you want the individual 'paragraphs' to be scrollable or the entire div( which contains these paragraphs) to be scrollable. In either case, you would need to provide a fixed height for the scroll to be useful. Your paragraph tag would need to have the following CSS applied to it :
p {
height: 200px; /*Some fixed height*/
overflow-y: scroll;
}
Here's an example of this: http://jsfiddle.net/y49C3/
In case you want your div called 'content' to be scrollable (as opposed to the paragraphs), then you would have to apply the aforementioned CSS to the div instead.
.content {
overflow-y: scroll;
height: 500px;
}
You can see that here: http://jsfiddle.net/qF7Mt/1/
I have tested this in Firefox (29) and IE 10 and it works fine!!!
Hope this helps!!!
I have the following code:
HTML
<div class="container">
<div class="fixed-area">
<div class="content"></div>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
html, body, body * {
z-index: 3;
}
div.container {
height: 100%;
position: relative;
background-color: #000000;
z-index: 1;
}
div.fixed-area {
position: relative;
width: 960px;
height: 100%;
margin: 0 auto;
background-color: #ffff00;
}
div.content {
position: relative;
width: 600px;
height: 1500px;
margin: 0 auto;
background-color: #ff0000;
}
The container (black) and fixed-area (yellow) divs do not expand with the content div (red) to cover the scrollable area. When scrollbar is used to view the bottom part of the content, a white background takes the place of the container and fixed-area divs. How can make the container and fixed-area divs expand to cover all background of the content, even when scrolled down?
If .container should have a minimum height of 100%, but should grow with the .fixed-area container, use:
height: auto;
min-height: 100%;
See: http://jsfiddle.net/gopeter/B2Ljt/4/ (shows how min-height works) and http://jsfiddle.net/gopeter/B2Ljt/3/ (shows how .container grows with .fixed-area)
Change container height to auto
Change to your container to this CSS
div.container {
height: auto;
position: relative;
background-color: #000000;
z-index: 1;
}
You had to change your container's height to auto;
You made the container's height 100%, which you didn't want. Simply remove this style.
JSFiddle demo
I am trying to get a full width background or image behind floated items within a max-width container. The page will be responsive so I can't fix the height of the .item objects nor be sure how many will be shown on each row.
I'd like to have a background or image running full length of the window aligned to a position in the .item div. I can use a very long div or image offset to the left without any issue but the right side makes the browser scroll which I don't want.
.bg {
background: red;
bottom: 0;
height: 30px;
left: -1000px;
position: absolute;
width: 2000px;
z-index: 0;
}
Fiddle here: http://jsfiddle.net/K8uAh/4/
The red banner is my background, see how it runs off to the right.
Ideally I would do this just using CSS, I know if I have to go the JavaScript route it all gets a bit clunky on the window resize.
You can use the .container. If you don't want the container to extend the entire width you need to remove overflow: hidden; and add it to an additional wrapper div.
body {
width: 100%;
margin: 0;
}
.container {
overflow: hidden;
}
Hi I tried on your fiddle and altered the width and the left attribute to have percentage instead of px as if we are dealing with px then it will be hard to make it responsive.
Code:
.bg {
background: red;
bottom: 0;
height: 30px;
position: absolute;
width: 125%;
left:-16%;
z-index: 0;
}
Fiddle: http://jsfiddle.net/K8uAh/1/
You can use a clear-fix div at the end of .item.
body {
width: 100%
}
.container{
background: red; /* Change your color here */
margin: 0 auto;
width: 100%
overflow: hidden;
}
.item{
background: #999;
float: left;
margin: 10px 5%;
position: relative;
width: 40%;
}
Fiddle
First : your fiddle css is incorrect :
body {
width: 100%;
}
} /*<- extra closing braces here is ruining your layout*/
see what i mean
second : to have a full width bg use:
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
container class should be :
.container {
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
margin: 0 auto;
max-width: 300px;
overflow: hidden;
}
working demo
I have the following html:
<body>
<h1>Something</h1>
<img id="myid" src='images/bigimage.png'/>
<div id="container">
<div id="fast-back">
<p class="big-font">SOMETHING</p>
<p class="small-font">SOMEThiNG ELSE</p>
</div>
</div>
</body>
And the CCS for it is:
html {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
background: url(images/body-background.png) top no-repeat;
min-height: 860px;
height: 860px;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
color: white;
visibility: hidden;
}
#container {
margin: 0 auto;
padding: 0;
position: relative;
min-width: 1336px;
height: 860px;
width: 1336px;
}
#myid{
position: absolute;
left: 50%;
right: 50%;
margin-left: -1280px;
margin-right: -1280px;
z-index: 1004;
}
#fast-back {
position: relative;
margin-left: 15%; /*it moves even using pixel*/
top: 272px;
z-index: 99999;
text-align: center;
width: 126px;
}
However, when I resize the browser window, the "fast-back" div moves to the right.
How can I prevent this behaviour?
Thanks!
Looking at #fastback CSS rule, you are using percentage instead of pixels on margin-left. Change it to pixels as unit of measure.
If you are using percentage as unit of measure, the left margin of the element, in your case, will move in relation to the viewport.
And if you are using pixels, on the other hand, the margin stays on the same location, even if the browser is resized.
Update
The solution is remove the width of the #container. See the following link.
http://jsfiddle.net/jlratwil/LB8rf/1/
The reason why the first solution does not work because the width of the container is set to 1336 pixels and centered aligned via margin: 0 auto. If the browser viewport width reaches beyond 1336 pixels during resize, the #fastback element will move.