I'm trying to achieve a layout where there is a div with a max height, and inside that, there are two divs. One div (the footer), has a fixed height (55px). The other is a scrollable div where the height will increase/decrease according to it's content.
<div class="parent">
<div class="wrapper">
<div class="panel">
Scrollable Div
</div>
<div class="fixed">
Fixed footer
</div>
</div>
</div>
The scrollable div height should always fit it's content. But when the max height is exceeded (.wrapper has a max-height of 300px), it should only take up the remaining space minus the footer height without affecting the footer's position.
But what I achieved of this layout is not according to my requirement.
In my example, when content gets added into the scrollable div, the footer gets pushed out of the wrapper. What should happen is the footer to remain at the bottom of the wrapper (without getting cut off), and the scrollable div to span its height upwards.
Please note I'm trying NOT to use position: fixed or absolute.
This is for a mobile app so fixed positions causes a lot of bugs.
Here is the JS Fiddle of what I have so far,
fiddle
set the max-height:300px to the .panel div instead
JS Fiddle here
Related
I'm using angular2-draggable module to resize div vertically. You can see this demo: https://xieziyu.github.io/angular2-draggable/#/resizable/default, in the Resizable Demo area.
What I wanted is, when resize the top div，the below div height decrease or increase, instead of move down. That is, this whole page height never change, just two div heights mutual adjustment. Is there anyone knowing how to do this?
You can easily achieve this with some simple css. Create a parent container that covers the full page, apply a flex-box style with column direction, and make the bottom element automatically resize to fit available space. e.g.
<div class="container" style="height:100%; display:flex; flex-direction:column">
<div ngResizable>
...
</div>
<div class="bottom-div style="flex:1">
...
</div>
</div>
</div>
Basically, I have a fixed sidebar (with a fixed width) and a content div (with a max-width).
I want the content div to be centered, and the sidebar to be positionned to the left of this content div.
The problem is, on a small screen or when reducing the size of the window, the content div must shrink and not push the sidebar.
I tried a lot of solutions (floating blocks with fake margin blocks, display:inline-block and white-space: nowrap), without success.
Here's the actual page : http://daimao.info/logique-monde-esprit?testCSS=3 , which adapts great to the size of the screen but has all the content on the left of the window.
Here's a modified page : http://daimao.info/logique-monde-esprit?testCSS=1 , that shows what I try to do, but only display well on large resolutions.
Thanks for any help.
Here is an example of what I think you're after:
Code structure like this:
<div class="container">
<div class="sidebar">
Sidebar content
</div>
<div class="content">
Content
</div>
</div>
Create a fixed space for the sidebar by adding a fixed padding-left value to .container
Set the sidebar width to the same value, float it left, and give it a negative margin-left of the same value
The sidebar will remain the same size and continue to fill the padding-left of the container as the container resizes. The .content will fill the remaining space within .container, resizing as .container resizes.
I have a right-floated, fluid-width div that sits nicely next to a another fluid-width, NON-floated column.
Everything works fine until I put another fluid-width div into that right-floated column, at which point it expands to 100% and drops the non-floated column below it. The only thing I can do to fix this is give the div causing the issue a fixed pixel width, but I don't want to do this as it needs to expand to its parent float but not beyond that. Here's an example of the problem:
<div style="overflow:hidden;width:800px;">
<div style="min-width:600px;min-height:200px;float:right;background:#FAA;">
<div id="floatContent" style="max-width:88%;">Here's some long string of text that makes the width of the parent float expand out to 100% of *its* parent, rather than shrinking the content to its original width (100% minus the width of the non-floated element</div>
</div>
<div style="min-width:200px;min-height:200px;background:#CCC;">Some non-floated content</div>
</div>
Any ideas? Thanks very much.
JSFiddle link
I have a problem. I have (simplified) this code:
<div class="page">
<div class="leftcolumn">content</div>
<div class="midcolumn">some text
<div class="midcolumn content">more text</div></div>
<div class="rightcolumn">a nice widget, or so</div>
</div>
left, mid and right column are just floated and have apdative (=%) widths, and that works fine. Unfortunately, the height of the three columns are right, they are just the height of the content that's in them. Unfortunately, the div page gets a height of 1px, even while columns in it are way bigger. How do I get the page div to get the same height of the columns. For example, if the largest of the three columns has a height of 1000px, I want the div page to get a height of 1000px. Can anyone tell me how I should do that?
Add overflow:auto to your page div.
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>