So I'm creating a website, here it is: http://www.testeeee.cixx6.com/
And I can't put the site_contente, and the content and sidebar (this 2 are inside site_contente) 100% height.
Basically I want the content and the sidebar to be 100% no matter what. And when the content on content div is more than 100%, I want it to scroll, I mean, only scroll on content scroll.
Example of what I want:
http://i.stack.imgur.com/i2rid.jpg
Based on what you submitted, you'll need to user an iframe. However, you may be referring to something like this: How might I force a floating DIV to match the height of another floating DIV?
to set scroll in a DIV use the style properties
overflow:scroll|auto
overflow-x: scroll|auto
overflow-y: scroll|auto
for sizeing I think you are answered
Edit ¿have you even tried???:
Copying from the question that was refered in other answer:
<DIV id="site_content" >
<DIV id="content" style="float : left; width :65%; height:auto;background-color:#FDD017;">
</DIV>
<DIV id="side_bar" style="float : left; width :35%;height:auto; background-color:#FDD017;">
</DIV>
</DIV>
Related
I'm trying to fill my page with a white background by extending my div to the bottom of the page. I've set my html, body and div to a height of 100%, but while the html and body's height extend perfectly to the bottom of the screen, my div's height goes even below that.
It seems like it's adding the height of my previous div's to the last div and thus extending it below my screen. Does anyone know how I can fix this so my last div extends to the bottom of my screen?
<html>
<body>
<div id="app">
<nav id="nav"></nav>
<header class="header"></header>
<div class="categories"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
This is my html. I want the content class to extend to the bottom of my screen because there's not enough content in there to fill it itself. I've given the html, body, app and content a height: 100%, but while the first 3 fill the screen perfectly, the content class goes even below the screen.
You could try using
overflow: auto
Would be nice to have some code example so we can help more.
I'm trying to have 2 divs fill the screen, one being at the bottom of the page and one being the "main" content area.
I've created a jsfiddle to demonstrate what I need: https://jsfiddle.net/zmnogytL/1/
The HTML looks like this:
<div id="parent">
<div class="messages">
<span id="jstext"></span>
</div>
<div class="input-area"></div>
</div>
The main div (the gray one) shouldn't expand when the content exceeds its height, but instead have a scrollbar within it.
The lower div(blue) should always stay in the same spot.
After countless hours I'm still not getting it to work the way I want to.
Thanks in advance!
Try it:
.messages{
overflow:scroll;
max-height: calc(100% - 100px);
}
Ok so I am using Jquery-ui resizable, so the user can control it.
The problem I am having is on the bottom half there is a textarea that is not expanding to 100% height.
Eventually, the textarea will be controlled by the codemirror library.
In my fiddle I have not included anything with code mirror, to keep it simple.
I think the form tag has something to do with it, since it is a block element.
<form>
<div class="wrapper">
<div id='ilo'>
<div id='iloWrapper'></div>
<div id='handle' class="ui-resizable-handle ui-resizable-s"></div>
</div>
<div id="editor">
<div class="edit-tool-bar"></div>
<div class="editor-window">
<textarea id="tArea"></textarea>
</div>
</div>
</div>
</form>
jsfiddle
[UPDATE]
Here is a new fiddle based on the answer from audre7.
As you can see The textarea is 100% but it is expanding well past the bottom of the page.
All I want is 2 sections one top and one bottom.
The bottom section will have 2 items in it the top item will not scroll but be sticky to the top of that bottom section.
The textarea will take up the rest of the room in the bottom section, and it will be able to scroll vertically.
You have to put the container of the textarea in a position absolute, and it seems to work as you want.
.editor-window{
position:absolute;
}
how would you make a footer container follow directly after the content and then stretch to the bottom of the page?
The setup is:
header-container is fixed 150px height
content-container stretches with whatever content should be inside
footer-container follows stretches for the remainder of the page.
So far I either have the footer directly after content with white space following, or a footer stuck to the bottom with white space between the content and the footer
The actual styling can vary depending on whether you are sure your page will never by long enough to scroll. You can often use the body tag itself for this trick, but it is less flexible and not recommended.
The idea here is to create a very long footer div, and have it be contained by the element which contains the rest of your content. Since the overflow of the parent is hidden, the actual length of the div will be ignored.
This is often shown with a counter-balancing bottom padding, but in your case that shouldn't be needed.
<style>
html,body,.bigDiv{height:100%}
.header{height:150px}
.footer{height:2000px; background-color:green;}
</style>
<div class="bigDiv" style="overflow:hidden;">
<div class="header"></div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):