I need to create a page that has two divs. There is a bottom one of fixed height that must always be visible, no matter the size of the page. All the space above it (if there is any) should then be allocated to the other div which will contain a canvas. The canvas can be of varying height, large or small, depending on data and other conditions. If it's larger than the space allocated, I'd like to have a scrollbar appear
I'm getting close. I can get the bottom div to always be visible via position:absolute and bottom:0. But I can't get the behavior I'm looking for for the top div, which is to expand to fill the rest of the space above the fixed bottom but not beyond if the canvas is big.
Edit: here is the code:
.top {
height: 500px;
overflow-y: auto;
}
.bottom {
position: absolute;
bottom: 0;
height: 20px;
}
There is javascript later that generates the canvas in the top div; based on server side code, it can be of arbitrary height.
What I have above looks right, but I want to remove the height: 500px from the top div to have it expand to use all the remaining available space on the screen.
From what I understood you want a footer to be always visible and the content could be of varying height. What I would basically do is
// Create a padding to allow all content to be visible
body { padding-bottom: 5em; }
footer
{
// Move it to the bottom and fix it to the view
position: fixed; bottom: 0px;
// Give it its dimensions. Height should be the same or less than the body bottom-padding.
height: 5em; width: 100%;
}
Here is an example: http://tinkerbin.com/gF303DsM
Related
I am setting up a max-width on my site's main container so that it doesn't appear comically wide on large screens, resulting in left and right margins on the main container. One piece of content we have is dynamically generated and could potentially be very wide. On large screens it's currently pushed over by the main containers left margin, aligning it with the rest of the content of the page, but I would like for it to align with the true left edge of the body instead of the edge of the container.
This picture shows some regular content with the expected margins, and my large content (a tournament bracket) overflowing off the right edge of the screen. I'd like to shift it to the very left.
Is there any way to do this without having to move it outside of the container? Additionally, is there an easy way to make it only do this when it would otherwise be larger than the main container (or even better, only when it would go off the right edge of the screen)?
Here's a generic solution that keeps the child element in the document flow:
child {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
We set the width of the child element to fill the entire viewport width, then we make it meet the edge of the screen by moving it to the left by a distance of half the viewport, minus 50% of the parent element's width.
Demo:
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow-x: hidden;
}
.parent {
max-width: 400px;
margin: 0 auto;
padding: 1rem;
position: relative;
background-color: darkgrey;
}
.child {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
height: 100px;
border: 3px solid red;
background-color: lightgrey;
}
<div class="parent">
Pre
<div class="child">Child</div>
Post
</div>
Browser support for vw and for calc() can generally be seen as IE9 and newer.
Note: This assumes the box model is set to border-box. Without border-box, you would also have to subtract paddings and borders, making this solution a mess.
Note: It is encouraged to hide horizontal overflow of your scrolling container, as certain browsers may choose to display a horizontal scrollbar despite there being no overflow.
You can position it relative so that you will be able to use left property and position it to left end , using appropriate values ( can't say which value will work as you haven't provided code )
If you want to position that when it is larger then you can apply a JS function and call it to measure width ( spanning that is offsetWidth) of your element .
If it's value exceeds a certain value then
apply style.position = "relative" ,
style.left = "somePreferredvalues"
else apply style.position = "static"
I will be sure about the position being absolute or relative if you provided your code . So try with both once
I'm trying to eliminate the extra space in the #middle-panel underneath the .box-label text, but I need to maintain the functionality of the #middle-panel expanding when I get to smaller screen sizes and the text becomes stacked. But if I set a specific height on the #middle-panel to eliminate the extra space, it no longer expands to accommodate the stacked type.
This fiddle shows my current implementation:
Current Fiddle
If, in the fiddle, you add height: 65px; to the #middle-panel-inner-div, you will see the desired amount of space below the text. Unfortunately, if you then change the width: of the .red-box-and-label class from 25% to 20% (to represent what will happen at smaller screen sizes), you will see the text becomes stacked, but the #middle-panel doesn't expand to accommodate it. Delete the just-added height: 65px; and you will see that the #middle-panel has now expanded to accommodate the text, but once again with too much space on the bottom.
I've tried some solutions, such as: Div overlapping & wrong height
but none of them seem to work.
Any suggestions would be greatly appreciated!
This thing is happens because height is auto and parent div expand height depend on child div. So it takes it's child div height. Even though you give negative top value.
The solution of this issue is, remove negative top value and give margin-top to .red-box-and-label
Remove top: -30px; from #middle-panel-inner-div. And:
.red-box-and-label {
margin: -30px 0 0;
padding: 0;
width: 25%;
}
Updated Working Fiddle
Normally you'd need an inner wrapper for the #middle-panel-inner-div with a negative bottom-margin to compensate for the 30px you moved the boxes up with. But if you place it, you'd have to move all the flex properties from #middle-panel-inner-div to the inner wrapper. So it's easier to just make an outer wrapper for it, move the top:-30px; position:relative to it and add the margin-bottom: -30px to #middle-panel-inner-div.
Here's your updated fiddle.
Notice the change in markup and the relevant CSS code:
.aWrapper {
top: -30px;
position: relative;
}
#middle-panel-inner-div {
/* top: -30px */
/* position: relative */
margin: 0 auto -30px;
}
So I am trying to make banners which scroll with the page, but always will be like 40px left from my wrapper.
This is my site: http://joostmeijer.eu/ so you can see how my html works.
I seriously don't get how I can make the banner div fixed but relative to my wrapper.
You can create a <div> inside your wrapper div, for example <div id="fixedwrapper"></div>, and then style it like this:
div#fixedwrapper {
display: block;
width: 140px;
height: 500px;
position: fixed;
left: 0px;
background: black;
}
Here's a live example: jsFiddle Demo. Although you will need to use the CSS3 #media-queries to remove the banner when the window size is reduced since your website isn't responsive and the banner will overlap your content once the window size is reduced.
You are contradicting yourself in the question. If a div has a fixed position it will position relative to the browser screen, so it will never ever move.
Solution:
If you do not want to change your html and keep the banner inside the div, you can apply a negative margin. Make sure the overflow on your wrapper is set on visible (default value) for this to work. Also make the image wider to fill up the gap you will create on the right by adding the pixels from the negative margin to your #banner div's width.
#banner{
background-color: blue;
height: 100px;
width: 540px; /*40px added to compensate for margin*/
margin-left: -40px; /*move the dic 40 px to the left from the div*/
}
Here it is in JSFiddle.
Is this what you are trying to do???
We like to integrate a dialog box into our webapplication.
We have dynamic height content and want the box to be as high as the content, but if the content is relatively high, we don't want to have the dialog box being higher than the window height.
In other words: wrap the content in the dialog box, if it makes the dialogbox taller than the window
Here is what does not work:
http://codepen.io/anon/pen/aClnr
Possible without JS? The problem is the dynamic height...
Requirements:
I want the box to be centered horizontally and vertically
I want a margin from the top and the bottom always (let's say 20px each)ยด
I want the #contentContainer to be scrollable when it overflows, not the box (thus keeping the 20px padding)
It doesnt look nice when the #contentBox is scrolling over the padding of #box
Don't want to have something like that:
http://codepen.io/anon/pen/Ajltx
Change your CSS to this:
#box {
width: 500px;
margin: 0 auto;
background: green;
position: relative;
overflow: auto;
max-height: 100%;
}
#contentContainer {
padding: 20px;
}
Like this, the box will become as heigh as the body max. When the content overflows the window a scrollbar will appear. Here is the demo: http://codepen.io/Nico_O/pen/jIJcb
If you take a look at this jsfiddle example: http://jsfiddle.net/2YbpZ/
You can see that both the sidebar and content elements stretch to the bottom of the view-port. This is what I want.
However, when given some content that stretches the page and requires the user to scroll: http://jsfiddle.net/p6qGg/
The sidebar and content divs cut off at the bottom of the view-port. I know why this happens, because 100% refers to the entire height of the parent element which in this case is the view-port, but when I change the markup to have a wrapper div surrounding the two elements and have min-height: 100% this happens: http://jsfiddle.net/Lr6k9/
Similarly, if the content is no longer long enough to not fit the view-port, the sidebar and content divs act as if they have no height assigned at all: http://jsfiddle.net/xsHHv/
So my question is how can I have the sidebar and content divs be the height of the view-port if the content doesn't stretch off the page, or have them the height of the content if it does?
The trick is to give your elements a huge padding-bottom, with a corresponding negative margin-bottom:
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
overflow: hidden;
}
#sidebar, #content {
float: left;
padding-bottom: 999em;
margin-bottom: -999em;
}
Here's your fiddle: http://jsfiddle.net/Lr6k9/4/