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);
}
Related
I have an upper block with a content wrapper, and a bottom block, which consists of two equal blocks also with content wrappers inside.
https://plnkr.co/edit/DTar7Wy5e37HnqbU2Gud?p=preview
<div class="upper">
<div class="wrap"></div>
</div>
<div class="bottom">
<div class="left">
<div class="left-wrap"></div>
</div>
<div class="right">
<div class="right-wrap"></div>
</div>
</div>
Wrapper blocks have a dotted border.
No matter how big or small screen is, the smaller bottom wrap blocks together will be always the same size and position as upper bigger one, because smaller blocks have 150px max-width, which is half of the upper wrapper block max-width.
But when you change the width of the bottom composing blocks from 50% to 40% and 60%, position of the smaller wrapper blocks is also changing.
https://plnkr.co/edit/FTmHxm2F3vD8LhF5DM0d?p=preview
You can change their max-width to some other numbers (99 and 201 in my example), but it seems impossible to make them always keep the same position as the upper wrap.
So, is there any way to make these wrappers from the second example act like in the first example with 50%?
You have to wrap also the content in your bottom block:
<div class="bottom">
<div class="wrap wrap-down">
<div class="left">
<div class="left-content"></div>
</div>
<div class="right">
<div class="right-content"></div>
</div>
</div>
</div>
adding in your css the new .wrap-down class that I have created:
.wrap-down{
display:flex;
}
and removing the dotted black border of .left-content and .right-content.
The problem that you had it is that you were wraping in your upper div the block, so you were taking the 90% of the width of the .upper class (its nearest parent).
In the block that you have down you were taking the 40% and 60% of your .bottom class, that were the 100% of the width of the page and not the 90% (by the wrapper) as in the first case.
Here you have the JSFiddle in which you can see the effect.
Let me know if you have doubts about this.
EDIT: This JSFiddle works if you set the left and the right of the block to 50% with another solution than yours. I am trying to get it for another percentages. I will edit if new changes works.
EDIT 2: Finally I got the solution for your problem. See the following JSFiddle. It does not matter the % that you put to .left or .right class, it will make the effect that you want to achieve.
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;
}
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>
I have a sidebar div to the left of my main content area and a footer below. How do I get my side bar div and main content div to both extend to my footer without filling it with content?
I think you are looking for the min-height CSS attribute. I don't know exactly how the markup is structured, but applying it to both divs (left and main), or a surrounding container should do it.
If you need it to work in older versions of IE, you should check out one of the CSS hacks like: http://www.dustindiaz.com/min-height-fast-hack/
Is this what you're looking for?
<div style="width:80%; margin:0 10% 0 10%">
<div style="background:red; width:20%; float:left">side</div>
<div style="background:blue; width:80%;float:right">main</div>
<div style="background:green; clear:both;">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):