I have a problem combining div boxes and the overflow: auto property for adding scrollbars if needed.
The problem is that I don't want the whole page to be scrollable, but just the content div, thus I added overflow: hidden to the body and overflow: auto to the content.
body
{
padding: 0;
margin: 0;
background-color: navy;
overflow: hidden; /** no scrollbar on whole page **/
height: 100%;
}
#content
{
background-color: green;
overflow: auto;
height: 100%;
}
Nevertheless, I'm not able to see the end of the page, as the div increases its size beyond the viewable part of the website.
Please suggest how to solve this problem and only keep the content div scrollable.
I uploaded an example of my problem here: jsfiddle.net/3n7ay/
I can only get this to work with a fixed header height, is there no solution for dynamic header size? It's hard for me to believe...
Thanks & Regards
I think you looking for overflow-y: scroll; instead?
See fiddle: http://jsfiddle.net/3n7ay/5/
If you set height: 100% to the content element and you have also an header in your viewport this will make the former not entirely visible inside the viewport itself.
So the height must be defined as 100% - <header height>, either via javascript (if you need to support older browser) or via CSS3 calc() function, e.g.
#content {
height: -webkit-calc(100% - <height of header>px);
height: -moz-calc(100% - <height of header>px);
height: calc(100% - <height of header>px);
}
Try flex box, if you don't concern about Ie8 and Ie9. You can see the compatibility situation in caniuse.com: flexbox
Make container a flex box:
#container {
background-color: yellow;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
Flex the content:
#content {
background-color: green;
overflow: auto;
height: 100%;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
See fiddle: http://jsfiddle.net/r4JUk/4/
Related
I've been trying to debug a CSS flex issue for a few hours. I need the three boxes in each row to have the same height. I've used flex quite a few times and think it might be an issue with floats but clearing them didn't seem to solve any obvious issues. It's likely that I'm overlooking something very simple.
Dev Page with Float Issues
.circle-box-table-container {
width: calc(100% + 42px);
margin: -10px;
overflow: hidden;
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
.col-xs-12.col-sm-12.col-md-4.circle-box-alt-blue-border {
display: inline-flex;
flex-shrink: 0;
}
I see you used height 100% inside your box. you need to modify some css,
.circle-box-content-text{
height: auto;
}
.circle-box-content-heading{
height: auto;
}
.circle-box-content-containter{
height: 100%;
}
do this way, hope your height issue will fix.
want to show 1 static page contain everything without a scroll
tried to make boddy padding 0 and overflow: hidden but nothing work
also tried the below page-header and background-image code also not work
display: flex!important;
flex-direction: column!important;
min-height: 1vh!important;
}```
```.background-image {flex-grow: 1!important;}
1 page with cover image and footer info, dont know what i am missing to fix that
If you set the body to have an overflow-y of hidden in css it will not allow the user to scroll down the page.
body {
overflow-y: hidden;
}
Go for the root html element, you can style it to:
html {
height: 100%;
width: 100%;
overflow: hidden;
}
The browser will interpret this as the html would use 100% of the usable device width space and hide the rest.
You probably don't want to avoid scrolling but instead make the page elements fit on the screen so there is no scrollbar and still everything is visible.
As a start, you could make the .main class (which only contains your footer) absolutely positioned at the bottom and take it from there
.main {
position: absolute;
bottom: 0;
width: 100%;
}
or, what I'd prefer, set the wrapper to be a flexbox:
UPDATED
body.home {
height: 100%;
overflow: hidden;
}
body.home .wrapper {
display: flex;
flex-direction: column;
}
/* Not needed anymore */
body.home .carousel {
}
body.home .main {
}
I tried this:
<div id="fixed-navigation">...<div>
<div id="content">...<div>
and the CSS:
#fixed-navigation {
position: fixed;
width: auto;
height: 100%;
background: red;
overflow-y: scroll;
}
#content {
background: yellow;
}
See: http://codepen.io/zssz/pen/LGEJOJ
But this hides part of the content div below the fixed div, and setting an arbitrary margin-left or something on #content would just ignore the variable auto width on #fixed-navigation.
So what's the right CSS way to accomplish this seemingly simple use case? (I do want the fixed navigation to be fixed, that is it must always stay on the left side while scrolling through the content)
EDIT: Oh sorry, and I forgot to mention it should work in the majority of actual browsers out there including IE9, so alas not flexbox to the rescue.
Here's a flex box implementation:
http://codepen.io/achisholm/pen/OMPBmp
The essential stuff is...
html, body {
height: 100%;
}
display: flex on the container, in this case body, then...
#fixed-navigation {
flex: 0 0 150px;
height: 100%;
overflow-y: scroll;
}
#content {
flex: 1 0 auto;
height: 100%;
overflow-y: scroll;
}
I have a block on my page where 2 images should stand next to each other. Depending on there width, they should scale accordantly.
Thank god we have Flexbox for that!
Now this demo works in Chrome, Safari, FF and IE Edge:
http://codepen.io/IbeVanmeenen/pen/PqgOJM
.el {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 4rem 0;
}
.el__wrp {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
justify-content: space-around;
min-width: 0px;
}
But the problem is that in IE11 and 10, the flex shrink seems to be ignored, resulting in the first image been shown full width and the second one disappearing...
Anyone have a clue how to fix this..?
Thanks in advance
Ok, fixed this!
I updated the pen.
I tested the original code, but replaced the images with text, and it worked! So the problem was the images.
Original code for the images was:
.el__wrp img {
display: block;
margin: 0;
max-width: 100%;
min-width: auto;
}
And I changed it to:
.el__wrp img {
display: block;
margin: 0;
width: 100%;
}
It all works now!
The IE 10 and 11 has bug when using min-height. It's known issues and you can find the issue for example here https://caniuse.com/#search=flex
I want to make some kind of image viewer with some descriptive text below. Problem is, that the lower box with the description has a fixed height and the image should fill the remaining height of whatever container it is in.
I wanted to use flexbox for that, as I think it seems to be the most elegant and simple solution (without using JS).
This this code and codepen for my current work, which seems to work mostly:
html, body, #container {
height: 100%
}
#container {
display: flex;
flex-direction: column;
}
#container > #image {
/* flex-grow: 1; */ /* not needed here? */
max-width: 75%;
background-color: #fcc;
margin: 0 auto;
}
img {
max-height: 100%;
/* HERE IS WHERE MY PROBLEM STARTS!; */
max-width: 100%;
}
#container > #text {
flex-grow: 0;
flex-shrink: 0;
background-color: rgba(128, 128, 128, 0.7);
padding: 5px;
max-width: 75%;
margin: 15px auto 0;
/* TOP MARGIN DOESN'T WORK */
}
http://codepen.io/Kageetai/pen/AaCJy
I got most of it to work but the image is not resizing itself correclty. As you can see through the transparent background of the text box, it stretches itself over the border of the containing div and even behind the text box.
So how can I retain the image with the correct aspect ratio inside its container?
And furthermore the centering with margin: 0 auto; seems to make problems when resizing the window. The image is not centered anymore and the page needs a refresh to make it work again.
So does anyone know how to make the image behave correctly? :)
For image , you can set an height, margin and display.
For image container, give a 2 or 3 value to flex and none to other, so it fills as much space as avalaible.
DEMO
CSS used :
html,
body,
#container {
height: 100%
}
#container {
display: flex;
flex-direction: column;
}
#container > #text {
background-color: #ccf;
padding: 5px;
}
#container>#image {
flex:3;
display:flex;
}
img {
width:auto;
display:block;
margin:auto;
height:100%;
}
Here's a more basic demo of how to achieve this.
<html style="height: 100%">
<body style="height: 100%; margin: 0; display: flex; flex-direction: column">
<p>Toolbar</p>
<div style="background: #bbb; flex: 1">Image</div>
</body>
</html>
A demo can be seen over at Codepen.