Dynamic content that changes height depending on header and footer height - javascript

I'm trying to make a page that contains 3 elements: Header, footer and content. As the names suggest, I want the header stuck to the top, the footer in the bottom, and the content in between. I have already made a layout, which puts the header and footer where they are supposed to be, but the content either overlaps them, or the other way around, where the content is supposed to get smaller instead.
My problem is that the header and footer are going to be used for many different things, and they are therefore dynamic when it comes to height.
Is there any way to make the content fill what space is left between the header and footer, without overlapping any of them?
If possible I would prefer pure CSS, but if that isn't possible, I'd like a JavaScript suggestion as well. :)
Thanks!
EDIT: This is what I got atm.
<div class="container">
<div id="header"></div>
<div id="footer"></div>
<div id="content"></div>
</div>
CSS:
#content {
position:absolute;
background: url('img/textures/fabric.png');
background-color: gray;
height:auto;
width:auto;
margin:0 auto 0 48px; /* Center content */
left:0;
right:0;
top:0;
bottom:0;
text-align:center;
}
#dashtop {
position:fixed;
width:auto;
background-color:aqua;
opacity: .5;
margin-left: 48px;
top:0;
left:0;
right:0;
text-align:center;
}
#footer {
position: fixed;
margin-left: 48px;
background-color:green;
bottom:0;
right:0;
left:0;
width:auto;
height:auto;
text-align:center;
opacity:0.5;
z-index:0;
}

Use relative positioning both for header and content (no position attribute), and use fixed positioning for the footer.

Related

Textarea having always window height

I'm not sure how to do this. II'm currently using Bootstrap's textarea, along with its container. I don't know how to make it so that the textarea extends to the bottom of the screen, which automatically increase/decrease depending on the window height. I've tried:
#form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
But nothing seems to change. Does anyone know how I can get this done?
Edit:
This is my html file:
<body>
<div class="container">
<div class="form-group">
<textarea class="form-control" rows="15" id="note"></textarea>
</div>
</div>
</body>
You have to put height property on the element like the code below.
#form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
height:50px;
}
If it doesn't work, try !important. If it doesn't work either, try setting rows in markup and set line-height on CSS.
<textarea rows="4">
.form-control should be a CSS class for bootstrap.
Are you using <textarea class="form-control"></textarea>? If so, your css rule is using #, which corresponds to an element ID, not a class. Change your CSS to this:
.form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
Try this code.
Actually you have used (id) #form-control, which should be (class) .form-control
I've used your code, just added width 100%
Now it'll take height and width of screen.
.form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
<div class="form-group">
<textarea class="form-control" placeholder="textarea"></textarea>
</div>
You can use the height property to set it to a certain height.
You can do something like this:
#form-control {
position:fixed;
height: 200px;
}
or
#form-control {
position:fixed;
height: 50%;
}
Just as a few examples.
I would suggest that you check out this W3 Schools page on the height css property... If you read the page you can see how else you can size it.
On that page there is also a link to this demo which I suggest you try to see what the different "settings" for lack of better word do.
Also make sure that the opening <textarea> tag calls the selector... so it should look something like this <textarea id="form-control">.
Good Luck

How to put 2 divs next to one huge div

So there are a lot of questions like this on StackOverflow but there doesn't seem to be one that will be helpful in my case.
As you can see, I have 2 divs on the screen. One on the left which is
float:left;
and the one in the middle is
margin-left-auto;
margin-right:auto;
So my question is, when I want to put another div JUST like the one on the right on the left of the middle DIV, how will I go on to doing this?
float:right;
has been tried on the right div but that just puts it in a different line because of the left div being floated.
So how do I do this? Answers are greatly appreciated.
I can provide more code such as how the DIV"s are arranged if needed.
All I did was type
display: flex;
in the container div and it worked perfectly.
To create a main body of content with a left and right sidebar, you can float:left and simply define a width for each div in the CSS.
ie:
.div1 {width:25%}
.div2 {width:50%}
.div3 {width:25%}
If you want to account for padding, just reduce the amount divided by three on each div width.
ie: http://jsfiddle.net/simsketch/9tj4va6r/
It might help you to start out using a framework like Foundation or Bootstrap.
Foundation provides lots of starter templates to help get you started here.
http://foundation.zurb.com/templates.html
When using a grid system, instead of needing to define widths in your custom css, you can simply include the foundation.css library, and reference the classes.
ie: <div class="large-6">content</div>
For the layout you're after, this would do the trick.
http://foundation.zurb.com/templates/feed.html
What they're doing there is simply:
<div class="large-3"></div>
<div class="large-6"></div>
<div class="large-3"></div>
As long as the numbers add up to twelve, they will fit perfectly.
This has been a brief introduction to grid systems. Consult the following for more information:
http://foundation.zurb.com/
http://getbootstrap.com/
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
These are the two most popular front-end frameworks but there are dozens more and they are all wonderful.
Flexbox solution
Wrap the items inside a parent container and set the display: flex
flex: 1 on the left and right items will grow and shrink it 1x.
flex: 2 on the middle items will grow and shrink it 2x.
.container {
display: flex;
}
.left,
.right {
flex: 1;
text-align: center;
background: #E77F24;
}
.middle {
flex: 2;
text-align: center;
background: lightblue;
margin: 0 10px;
}
<div class="container">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
.div1{
width:25%;
overflow:auto;
float:left;
background-color:blue;
color:white;
text-align:center;
}
.div2{
width:50%;
overflow:auto;
float:left;
background-color:red;
color:white;
text-align:center;
}
.div3{
width:25%;
overflow:auto;
float:left;
background-color:green;
color:white;
text-align:center;
}
<body>
<div class="div1">First Div</div>
<div class="div2">Second Div</div>
<div class="div3">Third Div</div>
</body>

Image that scales so you always can see the whole image

This is my site where I am testing my project: http://www.rojje.com/. If you want to see what I am trying to achieve then use the username: "test" with password: "password" or create a new user.
The first page after login is a page with a image that I want scalable.
Edit: I found the solution but it only works when I use top:0 and if I remove top:0 it will remove a part in the bottom of the image.
If you remove top:0 you will se whats behind the pic: http://jsfiddle.net/g9hh6qvb/
You can define a background-image in css and set the background-size to 'cover' or 'contain', see for example:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Mind you that the example you give is made using Flash.
Try using background-attachment:scroll, also set the background size with background-size: cover when setting up your style. According to the documentation description it attaches the background to the element itself, so re-sizing the element should re-size the background image also.
You can use the CSS background-size attribute 'Cover' as mentioned, if your image is set as the background of a div. If you are using an <img/> tag in your HTML, you can also (see both examples below):
CSS:
html,body{
margin:0;
height:100%;
}
.section{
width:100%;
height:100%;
display:block;
float:left;
position:relative;
overflow:hidden;
background:purple;
}
.section:first-child img{
position:absolute;
top:50%;
min-height:100%;
display:block;
left:50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
min-width:100%;
}
div:nth-child(3){
background: url("http://th02.deviantart.net/fs42/PRE/f/2009/133/a/0/Rainy_Landscape_STOCK_by_wyldraven.jpg")no-repeat fixed center;
background-size:cover;
}
HTML:
<div class="section">
<img src="http://th02.deviantart.net/fs42/PRE/f/2009/133/a/0/Rainy_Landscape_STOCK_by_wyldraven.jpg">
</div>
<div class="section">
</div>
<div class="section">
</div>
Example: CodePen

Making a scrollable div which doesn't scroll the rest of the body

Should be simple but I can't work it out.
I have two panes on my webpage. I want both to be independently scrollable:
<body>
<div id="sidebar"> ... lots of content ... </div>
<div id="container"> ... lots of content ... </div>
</body>
#sidebar{
width:200px;
position:fixed;
overflow:scroll;
background-color:black;
color:white;
top:0;
left:0;
height:100%;
}
Here is a JSFiddle. Notice how when you scroll to the bottom in the black sidebar, and keep scrolling, the body starts to scroll? That's what I want to avoid. Is there a simple way to achieve this?
Please try following updated CSS. Here I have set 200px height after that it will add scroll bar for #sidebar div.
#sidebar{
width:200px;
position:fixed;
overflow:auto;
background-color:black;
color:white;
top:0;
left:0;
height:200px;
}
Hope it may help.!!
body {
overflow-y : hidden
}
helps you if you don't want body to be scrolled.
This is working if I understood your problem correctly. Just making overflow:hidden when mouse is over sidebar div.
#sidebar:hover + #container{
overflow-y: hidden;
height: some_value; // your window height
}
You´re right. In Chrome it happens.
Maybe some jQuery?
$("#sidebar").focus(function(){
$('body').css("overflowY","hidden");
});
$("#sidebar").blur(function(){
$('body').css("overflowY","scroll");
});
Add tabindex="-1" to sidebar to get this working
Actually Working

skrollr.js Responsiveness

I just started using Skrollr.js - I was able to make the animations I wanted, however i needed to use position:fixed; for my elements to position them exactly where they should be.
Problem is, if your screen isn't a certain size, the animations are cutoff or not centred.
Is there a better way to position the elements or something with Skrollr I can do to fix this?
I have a 3 elements that come together to make a logo so it needs to be pretty precise in how it comes together.
Thanks
Just place those 3 elements inside a div, that way you will only position that div while not affecting the positioning of the elements inside it...no matter how you position the container, the elements inside will not suffer any transformation.
Here's an example:
JSFIDDLE
CSS:
#logo {
width:200px;
height:200px;
position:fixed;
top:20px;
left:20px;
background:red;
}
#elem1 {
width:100px;
height:100px;
position:absolute;
top:0;
left:0;
background:yellow;
}
#elem2 {
width:100px;
height:100px;
position:absolute;
top:0;
right:0;
background:blue;
}
#elem3 {
width:200px;
height:100px;
position:absolute;
bottom:0;
background:green;
}
HTML:
<div id="logo">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
</div>

Categories

Resources