I am working on a layout for a new site, and I'm having some trouble achieving what I want with the CSS. First of all, I want everything to always stay within the view of the current browser window, with scroll being in my content and not the browser itself. I have an outermost DIV which acts as my "wrapper" for the site displayed centered, with a set width, and having 100% height of the bowser window. Inside of this I place a header and all of this works as intended in all interested browsers.
However, once I place my actual content DIV inside this "wrapper" I am unable to define it to be the size I want. If I simply give it margins or padding to make up for the header I have absolutely positioned, the content will overflow and I can't set scroll. And if I try to set the size directly, there are no values I can put in that will work since the margins/padding will add to the size and it will now be bigger than the current browser window, and overflow.
Are there any styles people can think of I can use on the wrapper/content DIV(s) to get the desired look? Here is a diagram illustrating the look I want.
The following assumes, that you have a fixed height for your header (not a percentage). This example uses px values to make it easier to inspect with Firebug, but it works the same with em.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin:0;
height: 100%;
}
#wrapper {
position:relative;
width: 400px;
height: 100%;
margin: 0 auto 0 auto;
}
#header {
position:absolute;
margin-top:0;
height: 70px;
width: 400px;
background-color: #ccc;
}
#content {
position: absolute;
top: 70px;
bottom: 0;
width: 400px;
overflow: auto;
background-color: #99c;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
Content<br/>
Content<br/>
Content<br/>
Content<br/>
Content<br/>
Content
</div>
</div>
</body>
</html>
The important point is, that #content doesn't use a height at all - it uses a combination of top and bottom instead.
Note: I'm pretty sure, that modifications will be required for IE 6 ...
<style>
html, body {
margin: 0;
padding: 0;
text-align: center;
overflow: hidden; // prevents scroll bars in browser window}
#content_wrap {
width: 800px; // set this to whatever you want
margin: 0 auto; // centers the div
text-align: left;
height: 100%;
position: relative; // basis for absolute positioning}
#header {
position: absolute;
top: 0;
left: 20px;
width: 760px;}
#content {
position: absolute;
left: 0;
top: 20%;
height: 80%;
overflow: scroll;
overflow-x: hidden;}
</style>
The challenge with this approach, and any that I can think of, is that without CSS expressions, you can't make the #content div height extend to the bottom of the screen except as a percentage. The trouble with this is that your header will not have a fixed amount of room in which to work. There's no CSS representation for your ideal "#content div should have 200px margin on the top and extend to the bottom of the page" set of attributes.
You could do this easily with JS, however.
Related
So, I know this is something that has troubled others before me, but I simply cannot make it work. I am currently working on a 1000px width centered background that should go on for the entirety of the page. With height:100%; I can get it to fill the entire screen, but if I have Divs within that requires scrolling, the background is missing at the bottom.
I have searched the internet to solve this problem and have found a bunch of solutions, though none seem to work for me. Among them:
Change body position to relative.
Change body and or HTML to 100% height and 100% min-height (and every combination between).
Change the position of my Divs to all the available positions (absolute, fixed, relative etc.)
Try to use table at the Body and then table-rows for my divs.
All the various overflow opportunities (I am not interested in scrolling within my Divs)
And many more.
Here is my code.
HTML
<body>
<div class="headerMenu">
<div id="wrapper">
something
</div>
</div>
<div class="signMenu">
<div class="div_one">
something
</div>
<div class="div_two">
something
</div>
</div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height:100%; }
.signMenu {
padding-left: auto;
padding-right: auto;
width: 1000px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: white;
height:100%; }
.div_one {
background-color: rgb(250, 250, 250);
height: 1250px;
width: 400px;
position: absolute;
top:105px;
left: 0px;
margin-left: 30px;
}
.div_two {
background-color: rgb(250, 250, 250);
height: 1200px;
width: 400px;
position: absolute;
top:120px;
right: 0px;
margin-right: 30px;
}
Forget the headerMenu and wrapper for now. The point is, that if/when div one and two exeeds the height of the screen then the scroll bar appears, and when I scroll down the white background from the signMenu goes no further. I want that background to fill the enitire page (with scrolling down no matter how long), and not just the specific window size, which it does with height: 100%;.
I hope that makes sense. I am kind of new to this. Thanks in advance!
Here is the html:
<body>
<div class="ngdialog">
<div class="ngdialog-overlay></div>
<div class="ngdialog-content>
...modal content
</div.
</div>
<body>
The ngdialog div is, as you can guess, an modal (z-index: 10000).
My goal is, by applying some comination of styles (position, float etc.) to the elements to make it so that:
a) When the modal is displayed, have the overlay (grey and opacity; 0.5) cover all other elements in the page.
b) If the modal content is longer than the page, I would like the user to be able to use the main scroll bar to see the bottom/top of the modal. In other words, if the rest of the page is only 100px but the modal is 200px, I would like the scoll bar to allow the user to scroll that extra 100px.
The issue I am having is that when I position ngdialog as absolute, the window won't allow me to scroll to see the rest of the modal (as the absolute element is no longer in the standard element flow).
If I try to use fixed positioning, there is no scroll bar. If I use relative positioning, the other page elements (which the overlay is above) get moved around.
I have tried (what feels like) every combination of absolute, relative, fixed, static, float on all of these elements and I can't get the behavior I am seeking.
Keep in mind that body is position: relative (this can be changed if need be).
Thanks in advance, appreciate all comments.
Edit: Sorry, I had to go to sleep there, here is a fiddle:
https://jsfiddle.net/vpgoy756/1/
WIthout changing your HTML structure, this is what you'd need to do:
* {
/* This was to save typing */
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
min-height: 100%;
}
.ngdialog {
z-index: 10000;
text-align: center;
overflow: hidden;
}
.ngdialog-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(0,0,0, .4);
}
.ngdialog-content {
position: absolute;
z-index: 10000;
width: 100%;
height: 100%;
max-height: 100%;
overflow: auto;
}
.panel {
margin-top: 50px;
margin-left: 10%;
margin-right: 10%;
min-height: 500px;
z-index: 10000;
}
.reg-page-block {
width: 200px;
height: 200px;
display: inline-block;
background-color: #0f0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- ^ from your provided fiddle -->
<body>
<div class="ngdialog">
<div class="ngdialog-overlay"></div>
<div class="ngdialog-content">
<div class="panel panel-primary">
<div class="panel-heading">modal</div>
<div class="panel-body">content</div>
</div>
</div>
</div>
<div class="reg-page-block">Regular Page</div>
</body>
Be aware that if both the dialog and content are taller than the viewport, you will get double scrollbars - this may not be desirable but you specifically asked for the dialog to scroll separately from the content.
Try some of this CSS and see if it does the trick. It's hard to provide an exact solution without seeing your current CSS code, but maybe this will work.
Use this HTML structure instead:
<div class="ngdialog-overlay">
<div class="ngdialog-content">CONTENT HERE</div>
</div>
And this CSS code:
.ngdialog-overlay {
display:block;
width:100%;
height:100%;
background:#333333;
background:rgba(0,0,0,0.8);
z-index:10000;
position:fixed;
top:0;
left:0;
overflow: scroll;
}
.ngdialog-content{
text-align: center;
width:100%;
height:100%;
padding-top:30px;
padding-bottom:30px;
/* Optional if you want content vertically centered */
display:table-cell;
vertical-align: middle;
}
The trick is overflow:scroll; and height:100%; - because we have a set height, if the contents become any taller than that they will overflow and scroll. But in this case, when the user tries to scroll it will actually be scrolling the .ngdialog-overlay element and not the window itself.
http://jsfiddle.net/bcole808/6wcsxf3z/1/
In CSS file Add below lines
.modal-dialog {
transform: translateY(50%)!important;
}
You can change 50% to any other value which will solve problem in your Browser
It worked for me
I've found a method of placing the footer that I like, except for the fact that footer overlaps the content when the page resizes.
Using the structure and formatting I have already, how can I "clear" the footer, so that it drops off when the page resizes (avoiding an overlap of #content)?
I've tried clear: left and that does nothing for this.
Essentially, I want the footer to always be visible, and attached to the lower left of the window, as long as space allows; however, when the window gets smaller, I don't want the footer to overlap my content.
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-size: cover;
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
min-width: 900px;
overflow: hidden;
}
.main_nav {
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#content {
float: left;
width: 750px;
height: 600px;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
<ul class="main_nav">
<li></li>
</ul>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
The answer has been already choosen, but i wanted to give an alternative.
The "wrapper" contains "header" and "content", while the "footer" is outside of it. You could, for example, add
z-index:10;
to the wrapper's css and
z-index:1;
to the footer's css.
This one last isn't really needed, but it's for completeness. This way, whenever they get in "touch", the one with higher z-index will remain on foreground (ie, higher level on the z-axis, that is the axis perpendicular to the screen surface) and the other elements will slide behind, according to their own index.
This problem is because of width. You width is different in each case i.e. in content , footer & wrapper as well. I created a jsfiddle
[http://jsfiddle.net/jvaibhav/xncuF/37/]
try this.
I have a simple HTML page with a sidebar floated to the left and all content to the right. In the main content area I have an <iframe>. However, when I use CSS to set the height of the frame to 100% it seems to overflow the containing div for some reason, resulting in a small amount of white-space after my content.
Here is my HTML content:
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
</div>
<div id="content">
<iframe id="contentFrame"></iframe>
</div>
</div>
And here is my CSS:
html, body {
height: 100%;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: grey;
}
#sidebar {
width: 100px;
float: left;
background-color: blue;
height: 100%;
}
#content {
margin-left: 100px;
height: 100%;
background-color: yellow;
}
#contentFrame {
border: none;
padding: 0;
margin: 0;
background-color: pink;
height: 100%;
}
(NOTE: Before anybody asks, #container { position: absolute } is necessary for layout reasons; I can't change that.)
You can see it 'working' on this fiddle: http://jsfiddle.net/9q7yp/
The aim is to get rid of the white band along the bottom of the page (i.e. there shouldn't be a vertical scroll-bar in the result). If I set overflow: hidden for #content then the problem goes away. I'm happy to do this if necessary, but I can't for the life of me work out why it doesn't work without this. Can anyone tell me why?
Try to add
display:block;
to the iframe. http://jsfiddle.net/9q7yp/14/
Edit:
Well, it turns out there's a better solution (both in practice and in understanding what's going on):
Add
vertical-align:bottom;
to iframe#contentFrame. http://jsfiddle.net/9q7yp/17/
<iframe>, as an inline element, has the initial value of vertical-align:baseline, but a height:100% inline element will "push" the base line a few pixels lower (because initially the baseline is a few pixels higher from the bottom),
so the parent DIV is thinking "well content will be 2 pixels lower, I need to make room for that".
You can see this effect in this fiddle (check your browser console and pay attention to the bottom property of both ClientRect object).
Add margin:0 to body
html, body {
height: 100%;
margin:0 auto;
}
WORKING DEMO
Add margin: 0 to your html, body {} section.
...................demo
Hi now give to overflow:hidden; of this id #content
as like this
#content{
overflow:hidden;
}
Live demo
I am trying to get a image to fill up the viewport and auto resize when the browser gets resized, which is working, the only problem is that for some reason I can't get the image to NOT extend outside of the #wrapper element, even though it has overflow set to hidden, I am assuming it is because I am using percentages instead of a fixed width and height?
Now when I put overflow: hidden; on the body element it works, but then when you select text anywhere on the page and drag down, it scrolls down to the bottom of the image, which is problematic as I have a footer menu that is absolutely positioned to the bottom of the screen, which then moves up with the image as it is dragged down, and ruins the whole effect.
So basically I just want to have a auto resizing background, that doesn't overflow the viewport and cause scrollbars, and that allows your positioned content to stay where it is and not scroll up when you drag down on selected text.
HTML:
<html>
<head>
<title>project</title>
</head>
<body>
<div id="wrapper">
<div id="content">
<img src="image.jpg" width="1400" height="1200" />
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#content {
width: 100%;
height: 100%;
}
#wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
I know this is an old post, but for the benefit of others, since position:fixed isn't the most compatible way either, changing your #wrapper element to have position:relative; solves the problem.
Thanks,
Scott
Ok, got it working, I changed this
#wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
to this
#wrapper img {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
so as you can see, all I changed was the position property, from absolute to fixed, and that did the trick. :)
Use CSS backgrounds instead of html img elements. You can use background-size to resize the image.