Okay so I haven't been able to find a question with an answer yet, so I decided to make my own.
I am trying to create a 100% fluid layout, which technically I have done.
http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php
BUT, what I want to do now, is to make the page 100% in HEIGHT... But I don't want the page to scroll I want the inner DIV to scroll.
So I believe in short I want it to detect the height of the viewport screen, go 100%, and then IF content is longer then the screen, scroll the specific DIV, NOT the page.
I hope this makes sense.
<html>
<body style="overflow:hidden;">
<div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0">
</div>
</body>
</html>
That should do it for a simple case
I believe this will work for your case
<html>
<body style="overflow:hidden;">
<div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div>
<div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div>
<div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div>
<div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
</body>
</html>
this example will give you a static header and footer and allow the navigator and content area to be scrollable.
This is a different way to do this with all abs panels, it will fail on IE6, but I can provide the workaround CSS for IE6 if that is a requirement:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid Layout</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style rel="stylesheet" type="text/css">
body { background-color:black; margin:0px; padding:0px; }
.pageBox { position:absolute; top:20px; left:20px; right:20px; bottom:20px; min-width:200px}
.headerBox { position:absolute; width:100%; height:50px; background-color:#333; }
.contentBox { position:absolute; width:100%; top:52px; bottom:32px; background-color:blue; }
.footerBox { position:absolute; width:100%; height:30px; background-color:#ccc; bottom:0px; }
.contentBoxLeft { position:absolute; width:20%; height:100%; background-color:#b6b6b6; }
.contentBoxRight { position:absolute; width:80%; left:20%; height:100%; background-color:white; }
.contentBoxLeft,
.contentBoxRight { overflow:auto; overflow-x:hidden; }
</style>
</head>
<body>
<div class="pageBox">
<div class="headerBox">Header</div>
<div class="contentBox">
<div class="contentBoxLeft">ContentLeft asdf asdf adsf assf</div>
<div class="contentBoxRight">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />asdfsad ff asdf asdfasd</div>
</div>
<div class="footerBox">Footer</div>
</div>
</body>
</html>
make overflow:auto for the div
overflow:auto;
on the DIV style
You should just know that the size of the div should increase so it can show scrolls in it.
If you increase the page's size (which should be with style="overflow: hidden;" on the body)
it won't work.
If you don't want to use position:absolute (because it messes up your print out if your margins need to be different than all zeros) then you can do it with a little bit of JavaScript.
Set up your body and div like so to allow the div to scroll:
<body style='overflow:hidden'>
<div id=scrollablediv style='overflow-y:auto;height:100%'>
Scrollable content goes here
</div>
</body>
This technique depends on the div having a set height, and for that we require JavaScript.
Create a simple function to reset the height of your scrollable div
function calculateDivHeight(){
$("#scrollablediv").height(window.innerHeight);
}
And then call this function on both page load and on resize.
// Gets called when the page loads
calculateDivHeight();
// Bind calculate height function to window resize
$(window).resize(function () {
calculateDivHeight();
}
You can try this:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style rel="stylesheet" type="text/css">
.modal{width:300px;border:1px solid red;overflow: auto;opacity: 0.5;z-index:2;}
.bg{background:-webkit-linear-gradient(top,red,green,yellow);width:1000px;height:2000px;top:0;left:0;}
.btn{position:fixed;top:100px;left:100px;}
</style>
</head>
<body style='padding:0px;margin:0px;'>
<div class='bg' style='position:static'></div>
<div class='modal' style='display:none'></div>
<button class='btn'>toggle </button>
</body>
<script>
var str='',count=200;
while(count--){
str+=count+'<br>';
}
var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'),
btn=document.querySelector('.btn'),body=document.querySelector('body');
modal.innerHTML=str;
btn.onclick=function(){
if(bg.style.position=='fixed'){
bg.style.position='static';
window.scrollTo(0,bg.storeTop);
}else{
let top=bg.storeTop=body.scrollTop;
bg.style.position='fixed';
bg.style.top=(0-top)+'px';
}
modal.style.display=modal.style.display=='none'?'block':'none';
}
</script>
</html>
Related
I am making a website and at one part I made a flexbox row of 3 boxes, and whenever I put anything in any of the boxes their size expands and pushes away everything else. How do I make it not change it's size regardless of what I put in it? Here is the code:
/*---------CENTER----------*/
div.center-grid {
display:flex;
justify-content:center;
}
#grid1 {
background-color:red;
padding-left:250px;
padding-right:250px;
margin:20px;
padding-bottom:650px;
}
#grid2 {
background-color:green;
padding-left:250px;
padding-right:250px;
margin:20px;
padding-bottom:650px;
position:static;
max-width:0px;
max-height:0px;
}
#grid3 {
background-color:blue;
padding-left:250px;
padding-right:250px;
margin:20px;
padding-bottom:650px;
}
#ingrid1 {
display:grid;
}
<!DOCTYPE HTML>
<meta charset="UTF-8">
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center-grid">
<div id="grid1">
grid1
</div>
<div id="grid2">
<div id="ingrid1">
<image src="content/images/q1.png"></image>
<image src="content/images/q2.png"></image>
</div>
</div>
<div id="grid3">
grid3
</div>
</div>
</body>
</html>
Try using max-width in css. Max-width specifies the maximum width of the specified element.
I'm trying to make a site that scales properly based on browser size. I'm aware that usually requires to keep all width and heights set to 100%, however I have no clue how to set it when there's a minimum-height and minimum height for the header and footer. A school logo will be in the header which is unreadable when too small, and a google calendar in the sidebar.
What I'd like to do is set it up so that the header and subheader (dark blue and dark grey bars) are set to be a fixed position. The sidebar (black bar) set to fixed, as well as the footer (light grey). The content section (white box) I'd like to be the only scrollable section that contains all of the news and updates. No matter how I set it up something is always moving inappropriately.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
and the css
#header-container{
width:100%;
height:96px;
position:relative;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:100%;
position:relative;
padding-bottom:55px;
background-color:pink;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
add z-index:10 to #header-container....and all your problems will be solved!!
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<style>
#header-container{
width:100%;
height:96px;
position:relative;
z-index: 10;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:1021px;
position:relative;
padding-bottom:55px;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
border: 10px solid red;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
</style>
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
I don't think you need all the position: relative; stuff in there if you're using floats. Another thing you can do is add "overflow: auto" to the content div and do "overflow: hidden" on the others. Have you looked into bootstrap. This is very easy if you're using bootstrap. Check out: http://getbootstrap.com/ , it makes this type of stuff very very easy.
I am using four DIVs: container, header, content and footer.
Based on the text or images the content DIV is expanded but the header and footer div do not expand in IE7, IE8 and IE9 but works fine in Firefox, IE10 and IE11.
HTML:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
CSS
<style>
body {
height:100%;
margin-left: 0;
margin-top: 0;
padding:0;
width:100%;
position: relative;
display:inline-block;
}
#header {
top:0px;
height:75px;
width:100%;
}
#container {
display:table;
width:100%;
height:100%;
}
#content {
width:100%;
height:auto;
}
#footer {
top:5px;
bottom:0px;
height:45px;
width:100%;
}
</style>
Any ideas?
You have a fixed value on footer and header
#footer
{
top:5px;
bottom:0px;
/*height:45px;*/
width:100%;
}
#header
{
top:0px;
/*height:75px;*/
width:100%;
}
When it has fixed value, the element won't expand. The min-height could be a simple solution but a browser that doesn't support CSS2.0 won't process it right and could give you an unexpected result.
ANSWER UPDATED...
I'm giving you an answer that you might have expected. I still don't know what you are trying to achieve, what kind of layout do you need, and etc. But with a wild guess, I tweaked this code. It's going to be the exact answer for you if what you wanted was making header and footer responsive to the content div.
body {
margin-left: 0;
margin-top: 0;
padding:0;
}
#header {
top:0px;
width:100%;
height:75px;
position:absolute;
background-color:#eaeaea;
}
#content {
display:table;
padding:75px 0 45px;
height:150px;
position:relative;
}
#footer {
bottom:0px;
width:100%;
height:45px;
position:absolute;
background-color:#1d1d1d;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="content">
<h3>Expanding as you expected....</h3>
<h5>
* Try remove these h3 and h5 element. <br/>
the result will be nothing on your screen because no dimension is given to content div.
</h5>
<div id="header"></div>
<div id="footer"></div>
</div>
</body>
</html>
Try and see above code result and test how it expands as the content div gets smaller or bigger.
style.css
body
{
height:100%;
margin-left: 0;
margin-top: 0;
padding:0;
width:100%;
position: relative;
display:inline-block;
}
.header
{
top:0px;
height:75px;
width:100%;
}
.container
{
display:table;
width:100%;
height:100%;
}
.content
{
width:100%;
height:auto;
}
.footer
{
top:5px;
bottom:0px;
height:45px;
width:100%;
}
**index.xhtml**
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pm="http://primefaces.org/mobile"
>
<f:view>
<h:head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
</h:head>
<h:body>
<div class="container">
<div class="header" class="ui-layout-unit-header ui-widget-header">
<ui:include src="${ModuleGenerator.headerPageh}" />
</div>
<div class="content" class="ui-panel-content ui-widget-content">
<ui:include src="/pages/system/homeContent.xhtml"/>
</div>
<div class="footer" class="ui-layout-unit-footer ui-widget-header">
<ui:include src="${ModuleGenerator.headerPageh}" />
</div>
</div>
</h:body>
</f:view>
</ui:composition>
I have posted my full code of my layout...i hope it will okey for you to undestand yourself and reply.
this page working fine in IE10,IE11 and firefox but not works in IE6,IE7 and IE8.
what i am trying to achieve is? when the content(width) of div is expand dynamically the header and footer div(width) also expand based on content(width).
When we scroll down the page on browser then that page need to get centre alignment.
i am the beginner.
if you need further details post me.i will reply.
I've got two panels in the following code. The first should be a fixed size (or auto), but the second should get the rest of the space available.
So that's the reason that I set height:100%; but it's not still working.
<html style="height:100%;">
<body style="height:100%;">
<div style="background-color:green;">a
</div>
<div style="background-color:gray; height:100%;">d
</div>
</body>
</html>
What am I missing to display the second panel in the rest of the view.
i personally like to use position:absolute.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<style>
html,body {
width:100%;
height:100%;
}
#Green {
position:absolute;
top:0;
left:0;
right:0;
height:30px;
background-color:green;
}
#Gray {
background-color:gray;
position:absolute;
top:30px;
left:0;
right:0;
bottom:0;
}
</style>
<body>
<div id="Green">a</div>
<div id="Gray">d</div>
</body>
</html>
This would force the inheritance of the full length of the div respectful of the top 30px.
I am trying to create a web page using CSS (Table less) but my main content area is not extending with contents please check my html and css codes and give me a solutions, Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/styles.css" type="text/css" />
<title>::Model::</title>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Css code
body{
margin:0px;
padding:0px;
height:auto;
}
#wrapper{
margin:0px auto;
width:1000px;
}
#header{
height:50px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#main{
height:auto;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#footer{
height:100px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#left{
border:#CCCCCC solid 1px;
width:640px;
padding:4px;
float:left;
margin-right:2px;
}
#right{
float:right;
padding:4px;
border:#CCCCCC solid 1px;
width:320px;
}
Thanks again
Just apply overflow:auto; on #main to make it wrap its floating children.
Take a look on Floating image to the left changes container div's height
(You can remove its height rule)
You have floated elements in your document, which as the name suggests means they float above your 'main' div. Hence it isnt extending.
Easy to fix however, you just need to stick a 'clear' in.
your html should look like this, notice the extra div.
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div class="clearme"></div>
</div>
And simply add the following to your css.
.clearme{clear:both}
More can be found on the clear property and its usage here: http://www.tutorialhero.com/tutorial-64-css_clear_property.php