So if I want to have two divs, each of 100% of the entire page, side by side, given that the wrapper has overflow:hidden, how should I go about implementing it?
I have tried using inline-block but it did not work.
I have tried using float too but it caused errors.
I want the second div to be hidden so I can change it's left as an animation, sort of like a slide.
Thanks in advance!
If I've understood you correctly, you can achieve what you're after using inline-block. You just have to be a little careful with white space (i.e. you need to make sure you've got no white space between the two child div elements). I've stopped the divs from wrapping by setting white-space: nowrap;.
<div class="foo">
<div> woo woo !</div><div> woo woo !</div>
</div>
.foo {
overflow: hidden;
white-space: nowrap;
}
.foo > div {
display: inline-block;
vertical-align: top;
width: 100%;
background: aqua;
}
.foo > div + div {
background: lime;
}
Try it out at http://jsfiddle.net/8Q3pS/2/.
Edit: Here's an alternative implementation using position: absolute;: http://jsfiddle.net/8Q3pS/5/. That way you'll be able to animate the second one into view using left. Note that you'll need to set a height on the parent div.
.foo {
position: relative;
width: 100%;
height: 1.5em;
overflow: hidden;
}
.foo > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: aqua;
}
.foo > div + div {
left: 100%;
background: lime;
}
This should be purely a matter of positioning one of the divs off the page using absolute positioning and transitioning the left property using either hover state or javascript.
Hover the red div.
Codepen Example
Could you not set max-width to 100%, not set the actual width and float them side by side? With both overflow:hidden, as they expand it should create horizontal scrollbars.
Related
I have a div which contains three more divs. The first one is a toolbar that can be collapsed (red in the example). It has a fixed height. The second one (black) has to fill all the remaining space, and must expand if the red one is collapsed. The third one (green) is in fact a button attached to the bottom of the red div. When the user clicks on it, it collapses or expands the red div.
<div id="container">
<div id="tools">
</div>
<div id="hider">
</div>
<div id="work-area">
</div>
</div>
I made an example on jsfiddle : https://jsfiddle.net/gpoa8s92/3/
I don't see how to make the black div take all the remaining space. I tried using a flexbox, and it works, but the green div isn't attached to the bottom of the red div anymore.
Is there a solution using ass less javascript as possible ?
Thank you !
I think your solution can be achieved with flexbox, just put tools and work area as siblings and for first set static height, flex-grow: 0 and flex shrink: 0, and for work area set height: 100%, flex-grow: 1 and flex shrink: 1.
This will make tools to occupy 100px and work area remaining place.
Since the toggle button is part of tools you can put it inside it, and move it outside using position: absolute and top: 100%, and give tools position: relative to stick toggle button to its bottom.
Now you can create a class for tools that set its height: 0 and animate it with CSS transitions.
Then on toggle button click, you can toggle a class on tools and it should be as you wanted.
Toggling tools height could be done without javascript- it would be a bit confusing but more accessible, here's an example of that: https://codepen.io/morganfeeney/pen/KiBty
Prepared an example for you - I've used BEM methodology for naming elements and cached used elements as variables.
const $toggleButton = $('.js-tools-toggle');
const $toggleContent = $('.js-tools-root');
const collapsedClass = 'tools--collapsed';
$toggleButton.on('click', function() {
$toggleContent.toggleClass(collapsedClass);
})
.container {
display: flex;
flex-direction: column;
height: 400px;
background-color: blue;
}
.tools {
transition: height 250ms ease-in-out;
position: relative;
display: flex;
flex-direction: column;
height: 100px;
}
.tools--collapsed {
height: 0px;
}
.tools__content {
height: 100%;
background-color: green;
overflow: hidden;
}
.tools__action {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 20px;
background-color: red;
}
.work-area {
background-color: black;
flex: 1 1 auto;
height: 100%;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="tools js-tools-root">
<div class="tools__content"> Content of tools</div>
<div class="tools__action js-tools-toggle">
toggle
</div>
</div>
<div class="work-area">
content of work area
</div>
</div>
I've been trying layout with css the div (dark blue) so that changes size according to the size of the window without covering the bottom panel, I thought that with the height to 100% official, but not understand because it ignores the panel below, and ends moving off the page
now that see not let me post pictures, so something is also what I have:
html:
<div id="container">
<div id="message">hi i'm a message</div><!--i can see this div-->
<div id="darkBlue"></div>
<div id="anotherPanel">you can't see me</div>
</div>
and this css
#container{//This container is attached to the right side
right: 0;
width: 300px;
position: fixed;
height: 100%;
top: 0;
color: white;
padding: 20px;
}
#darkBlue{//this div cover the next div
height: 100%;
border: 1px solid white;
background: #3a5193;
bottom: 100px;
}
#anotherPanel{//i can't see this div.......
height: 100px;
botton: 0px;
}
Not sure if you can solve with css, or have to resort to using javascript (which is something I want to avoid), anyone knows some property who can help me?
UPDATE: This is the picture of what layout attempt: https://www.dropbox.com/s/t9nl5mb3sq85m3j/repro.png
Using bottom top left right you must define position. In your case remove bottom from #darkBlue #anotherPanel and add to #darkBlue height: calc(100% - 100px)
DEMO
Update
If you don't want to use calc then add margin-bottom:-100px; to #darkBlue
DEMO
You have a typo in the CSS of anotherPanel. You have botton instead of bottom. Also when using this CSS properties, is good to set the position.
Try this:
#anotherPanel{
height: 100px;
width: 300px;
bottom: 0px;
background: #F00;
position:absolute;
}
Is this the droid you are looking for?
Best.
If you assign a height of 100% to a child element it will take up 100% of the height of the parent element. If you want the element to cover the whole container without being in the document flow of the parent element you can try to do the following:
#darkBlue {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3a5193;
}
Edit: #Niels has mentioned an additional detail I've not mentioned before. For this to work the parent elements position needs to be set to either fixed, absolute or relative
I have 2 divs with content that uses JQuery slidetoggle to show/hide, but I want the second to occupy all the remaining vertical height of the screen.
$('.heading').click(function (e) {
$(e.target).parent().children('.content').slideToggle("fast", "swing");
});
jsFiddle I started: http://jsfiddle.net/LMHgM/
Any ideas how this can be done without resorting to javascript? Hopefully this should be browser resizing and other element resizing should keep this greedy div in the correct state. Currently my only solution has been to trigger my own resize method on slidetoggle and browser resize to correct the height.
Thanks.
You should specify the height as 100% to the element and also to the body and html
DEMO http://jsfiddle.net/kevinPHPkevin/LMHgM/3/
body, html {
height:100%;
}
#second {
border: 1px dashed blue;
height:100%;
}
Basically it is collapsing to fit content, not expanding to fit the page. You can also put a wrapper div around the divs with position: absolute and height: & width: 100%
Updated fiddle: http://jsfiddle.net/LMHgM/2/
.wrapper{
position: absolute;
height: 100%;
width: 100%;
}
Seems the best solution is to use display: table to divide up the screen.
.wrapper {
width: 100%;
height: 100%;
display: table;
border-collapse: collapse;
}
.group {
display: table-row;
}
http://jsfiddle.net/LMHgM/5/
This dreaded problem.
What I currently have
html:
<html>
<body>
<div class="wrapper"></div>
<div class ="footer"></div>
</body>
</html
css:
* {
margin: 0;
}
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0;
}
.footer
height: 36px;
}
The problem is when i inspect the rendered page with chrome a few problems I see:
1. The html tag has a height associated with it hmmm and its not the entire page height
2. so I have div inside of the wrapper div that extends past the wrapper, body, and html tag?
My best guess is that if i can get the html to the page height I could style the footer to page bottom.
I was considering using javascript to grab the true height in pixels and passing that to height and ditching the percent. Only problem is I still want to know whats going on!
Thanks,
JT
add this css to your wrapper divs
wrapper_div{ overflow:hidden; }
this is a hack to recalculate floated elements inside an element. Otherwise the browser will forget about the floated elements, overflow-hidden does the trick or you can append a clear floated element to the bottom of the wrapper div like so
CSS
clear_float{
clear:both; display:block;
overflow:hidden; visibility:hidden;
width:0px; height:0px;
}
HTML
<div class="wrapperdiv">
/* other HTML elements*/
<div class="clear_float"></div>
</div>
this is assuming that the troublesome div is classed wrapperdiv
on second look this is completely invalid
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
}
you are setting the height twice in one declaration. height: auto !Important will take precedent over height: 100% so you need to decide whether you want your height automatically rendered over explicitly at 100%.
and your missing the opening block in this css declaration
.footer
height: 36px;
}
Just before the closing tag of the wrapper add a div with the class 'clear'
CSS:
.clear { clear: both; }
.footer { margin-top: -36px; }
The problem is that floated elements behave like absolute positioned elements.. They are not taken in account when calculating the height of the wrapper div.
In the end I just made the html body tags set via pixels and not percent. Nothing I tried above satisfied me.
If you want a facebook like fixed footer status bar. Try using the following css:
.footer {
width: 100%;
height: 25px;
position: fixed;
bottom: 0px;
I want to clip content from left using overflow-x:hidden. By default its clipping content from right. I want the content to grow from left and as soon as it hits the parent boundary it should clip content from left instead of right. Any idea? Below is the current problem i am facing.
div {
height: 120px;
background: #666;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
}
http://jsfiddle.net/LxYGN/5/
Try adding this to your css. It will cause the text to flow right to left and subsequently hide the overflow on the left:
direction: rtl;
More info here: https://developer.mozilla.org/en-US/docs/CSS/direction
Do you mean this?
div > * {
float: right;
}
http://jsfiddle.net/LxYGN/6/