I have a problem with sizing a scrolling div to fill the window, considering that I have one or more top divs and a footer div.
this is what I need
+------------------+ +------------------+ +------------------+
| top1 | | top1 | | top1 |
+------------------+ +------------------+ +------------------+
| top2 | | top2 | | |^|
| | +------------------+ | | |
+------------------+ | |^| | | |
| |^| | | | | scroll | |
| | | => | scroll | | => | | |
| scroll | | | | | | | |
| | | | | | | | |
| | | | | | | | |
| |v| | |v| | |v|
+------------------+ +------------------+ +------------------+
| footer | | footer | | footer |
+------------------+ +------------------+ +------------------+
Top1 has a fixed height.
Footer has a fixed height.
Top2 doesn't have a fixed height and sometimes doesn't even appear.
The only way I know to do that is by defining the container height, fixing its top and its bottom. But I cannot fix the top property since the top2 div has variable height...
Can someone help me?
html:
<body>
<div id='top1'>Top1</div>
<div id='top2'>Top2</div>
<div id='container'>
<ul id='data'>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
</div>
<div id="footer">footer</div>
</body>
css:
body, html {
height: 100%;
}
#top1 {
width: 100%;
height: 50px;
background-color: #EEE;
text-align: center;
line-height: 50px;
}
#top2 {
width: 100%;
height: 50px;
background-color: #DDD;
text-align: center;
line-height: 50px;
}
#footer {
width: 100%;
height: 50px;
background-color: #BBB;
text-align: center;
line-height: 50px;
position: fixed;
bottom: 0;
}
#container {
overflow: auto;
width: 100%;
position: absolute;
top: 100px;
bottom: 50px;
}
#data li {
font-size: 30px;
padding: 10px;
}
try it
first get windows height by this function
$( window ).height();
and make one more function for top2
$( document ).height();
pluse heights 1st header + 2nd footer +.3rd top2 ( get by this function $( document ).height();)
minus height in windows height
then will get new height and apply on scrlloing div
one more thing for make better scrlloing use resizing function
Related
Problem
I am currently trying to left-align blocks within a centered wrapper with dynamic width. I can't get this to work using only HTML/CSS.
Here is a JSFiddle: https://jsfiddle.net/hudxtL8L/
Examples
So currently, it looks like this:
| _____ _____ |
| | | | | |
| | | | | |
| |_____| |_____| |
| _____ _____ |
| | | | | |
| | | | | |
| |_____| |_____| |
| _____ |
| | | |
| | | |
| |_____| |
| |
And I want it to look like this:
| _____ _____ |
| | | | | |
| | | | | |
| |_____| |_____| |
| _____ _____ |
| | | | | |
| | | | | |
| |_____| |_____| |
| _____ |
| | | |
| | | |
| |_____| |
| |
or, on a bigger device, something like this:
| _____ _____ _____ |
| | | | | | | |
| | | | | | | |
| |_____| |_____| |_____| |
| _____ _____ _____ |
| | | | | | | |
| | | | | | | |
| |_____| |_____| |_____| |
| _____ |
| | | |
| | | |
| |_____| |
| |
The important thing here is that the last row is not centered, but left-aligned within the centered parent. Can this be done, and if so, how? I tried different approaches but all of them failed.
Tried approaches
margin: 0 auto will not work since it requires a fixed width, but I want as many .element's as possible per row.
Using a table seems difficult as well, since I don't know how many .element's will fit in one row on the current device.
Using javascript will of course work, but I have the feeling that there is a CSS-only solution to this.
Use can use CVS flex to realize this layout.
One approach is to define a container, #content that has a fixed width and center it with margin: 0 auto.
Apply the flex properties to #content, use justify-content: space-between to get the child elements in the desired positions.
The child .elements need flex-basis: 100px to specify the width within the flex container context.
You can control the spacing between elements using margins.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
#viewport {
border: 1px solid black;
}
#content {
width: 250px;
margin: 0 auto;
border: 1px dashed blue;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.element {
border: 1px dotted black;
flex-basis: 100px;
height: 100px;
margin: 10px; /* optinal, gives you some control on spacing */
}
<div id="viewport">
<div id="content">
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">5</div>
</div>
</div>
Is this what you want:
#content {
width: 300px;
border: 1px solid red;
}
#outer {
text-align: center;
border: 1px solid green;
}
#inner {
display: inline-block;
text-align: left;
border: 1px solid blue;
padding: 20px;
}
.element {
display: inline-block;
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 15px;
}
#inner {
display: block;
text-align: left;
border: 1px solid blue;
text-align:center;
-moz-text-align-last: left;
text-align-last: left;
}
.element:last-child {
margin-left:20px;
}
Use text-align-last: left
Logo Here. | -- 3 Column -- |
Error Message here | |
____________________________________________ || W:232.5px |
| - - 1 Column -- | -- 2nd Column -- || |
| W:232.5px | W:465px || |
|_________________|__________________________||_________________|
Max W: 930px.
Hey, could anyone explain to me how I can achieve this CSS.
3 columns, all has 100% height depending how much contents in the column, e.g. column 1 might be
bigger than column 2 and/or 3.
I've also struggled to keep its structure when minimizing the browser, e.g column 3 is going under column 1.
so if possible I'd like to know how to keep its structure on minimizing.
Something like this maybe...
body {
border:0
}
#logo {
position: fixed;
top: 0px;
left: 0px;
width: 200px;
height: 64px;
background-color: blue;
}
#error-msg {
position: fixed;
top: 0px;
left: 200px;
width: 497px;
height: 64px;
background-color: green;
}
#column1 {
position: fixed;
top: 64px;
left: 0px;
width: 232px;
height: 100%;
background-color: #efefaa;
}
#column2 {
position: fixed;
top: 64px;
left: 233px;
width: 465px;
height: 100%;
background-color: #aaefef;
}
#column3 {
position: fixed;
top: 0px;
left: 698px;
width: 232px;
height: 100%;
background-color: #efaaef;
}
<div id="logo"></div>
<div id="error-msg"></div>
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
To prevent column 3 go under column 1 either wrap everything inside a container with fixed width or use % as unit for the columns
I would go with a Flexbox with align-items: flex-end;
That will align the items to the bottom of the container and respect their variable height and width.
Here is a great reference for flexboxes
What you're looking for is pretty straight forward, you just need to add a wrapper to the first two columns and use that as the 'main' column.
In terms of responsiveness the best method is converting your pixels to percentage values, then using breakpoints when the widths start to become too tight/too wide.
|________________________________________________| | --Side Column-- |
| - - Main Column - - | | |
| W: 75% | | |
|________________________________________________| | |
| Logo Here. | | |
|________________________________________________| | |
| Error Message here | | |
|________________________________________________| | |
| ______________________________________________ | | W:25% |
| | - - 1 Column -- | -- 2nd Column -- | | | |
| | W:33.3% | W:66.6% | | | |
| |_________________|__________________________| | |_________________|
| |
------------------------------------------------
I have a container of a fixed size, containing a vertical list of blocks of varying heights .
I would like to hide all blocks that does not fit completely within the container.
So assuming something like this:
#container{
height: 150px;
width: 220px;
border:1px solid green;
padding:10px;
overflow: hidden;
}
.inner{
border:1px solid blue;
height: 50px;
width: 200px;
margin: 10px;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
<div id="container" >
<div class="inner">A</div>
<div class="inner">B</div>
<div class="inner">C</div>
<div class="inner">D</div>
</div>
(See: http://jsfiddle.net/TSCzS/)
I get something like this:
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| +-------+ |
+--| C |--+
+-------+
+-------+
| D |
+-------+
I do not want to just have the C block clipped:
(as when simply using overflow:hidden on the container)
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| +-------+ |
| | C | |
+-------------+
but instead, the blocks C and D should be hidden like this:
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| |
+-------------+
How can I do this?
My application for this is that I have a full screen browser window (in a digital signage application) showing the "latest news". The units have no input devices, so scrolling is not possible.
A similar question, but without a working solution:
Hide block which does not fit container height
Thanks.
The only way I can imagine a solution is via JavaScript. CSS itself wont help.
Here's an update of your fiddle: http://jsfiddle.net/bukfixart/TSCzS/1/
This snippet selects all clipping elements and hides them.
$('.inner', '#container').filter(function() {
return $('#container').offset().top + $('#container').height() < $(this).offset().top + $(this).height();
}).hide();
For this solution you need to use jQuery
edit:
For all the pure CSS enthusiasts ;-)
http://jsfiddle.net/bukfixart/CfMer/
I tried a solution without javascript and used css3 transformations instead. Therefore some markup changes are necessary
<div id="outercontainer" >
<div id="container" >
<div class="outer">
<div class="inner">A</div>
</div>
<div class="outer">
<div class="inner">B</div>
</div>
<div class="outer">
<div class="inner">C</div>
</div>
<div class="outer">
<div class="inner">D</div>
</div>
<div style="clear:left;"></div>
</div>
</div>
And here's the a little bit stranger style code
#outercontainer {
width:240px; /* container width + padding */
height:170px; /* container height + padding */
border:1px solid green;
}
#container{
height: 220px; /* container width ^^ */
width: 150px; /* container height ^^ */
padding:10px;
overflow: hidden;
position:relative;
left:35px; /* half of difference from width + padding to outer container width */
top:-35px; /* half of difference from height + padding to outer container height */
-webkit-transform:rotate(90deg);
}
.outer{
float:left;
height:202px; /* width of the inner box + border */
width:52px; /* height of the inner box + border */
margin:10px 10px 10px 0px;
line-height:200px; /* width of the inner box */
vertical-align:middle;
-webkit-transform:rotate(-90deg);
}
.inner{
border:1px solid blue;
height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
line-height: 50px;
display:inline-block;
position: relative;
left: -75px; /* half of difference between width and height */
}
If I have two divs, outer and inner, with following stylesheet:
#html,body{
height:100%;
margin:0;
padding: 0;
}
#outer{
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
}
#inner{
position: relative;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: yellow;
}
At the same time, outer and inner div should grow both in width and height if content inside innerdiv grows dynamically.
+---------------------+
| +=================+ |
| | | |
| | | |
| | | |
| | | |
| | div id="inner" | | div id="outer"
| | | |
| | | |
| | | |
| +-----------------+ |
+---------------------+
But if I change the stylesheet to this:
#html,body{
height:100%;
margin:0;
padding: 0;
}
#outer{
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
}
#inner{
position: relative;
top: 50px;
left: 0;
width: 0;
height: 100%;
background-color: yellow;
}
The inner div will go down to 50px from top and bottom of outer div as there is top:50px style on inner div like this:
+---------------------+
| |
| +=================+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
+-| |-+
| |
+-----------------+
But I want inner div will go down 50px from outer div, but remain bottom of outer div with position: relative like this:
+---------------------+
| |
| +=================+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| +-----------------+ |
+---------------------+
How to do this?
You can achieve this using a jQuery
var newinnerdivheight=$("#innerdiv").height() + $("#innerdiv").innerHeight() +$("#innerdiv").outerHeight();
$("#innerdiv").height(newinnerdivheight);
$("#outerdiv").height(newinnerdivheight+50);
similarly for width also...
The basic question is: How can a be shrink-to-fit over an element while itself containing other elements?
The goal is to have a (centered) menu over an (centered) image, which´s width and height shall relate to the images dimensions.
All of it being responsive, meaning no absolute sizes!
Here´s the sample code:
<div id="menu">
<img src="picture.jpg" />
<div id="left">
test1
</div>
<div id="right">
test2
</div>
</div>
#menu{
position:relative;
display: table; /*tried inline-block as well */
text-align: center;
line-height: 1;
}
#menu img{
height: 90%;
position:relative;
}
#left{
width: 46%;
background-color: #ffcdcc;
float: left;
text-align: right;
}
#clear{
clear: both;
}
#right{
width: 46%;
background-color: #324344;
float: right;
text-align: left;
}
and this is what it´s supposed to look like:
____________________________________
| |
| ------------------------------ |
| | | |
| | p i c t u r e | |
| | | |
| | | |
| | | |
| | | |
| | left <button> right | |
| | | |
| ------------------------------ |
| |
------------------------------------
The height/width ratio of the picture is always the same. It´s total size depends on the users window though.
I just can´t get the "menu" div to wrap around the and the "left" and "right" divs be positionable at the same time.
Is this even possible? I´m not even talking about browser compatibiliy yet...
See if this works: http://jsfiddle.net/sdvnh/1/
Changes:
#menu {
display: block;
}
#menu img{
height: 90%;
width: 90%;
}