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;
}
Related
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);
}
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.
I have a container with several floated divs within it. I want the div to stretch to the full height of it's content.
I have tried adding overflow:visible to the container to make it expand and also added a clear but neither seem to work.
Live site link available here
You need to put something not floated in the div and clear that.
<div class="magical-div>
<div class="float1"> content </div>
<div class="float2"> content </div>
<div style="display:block;clear:both;"> </div>
</div>
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
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>