I'm trying to align a property in css with :
display: flex;
justify-content: center;
align-items: center;
body has height :100%, and the described element is the first nested element in body, why it isn't receiving 100% height ?
codesandbox.io
Kindly add height: 100%; to the id root as you are working with react.
#root {
height: 100%;
}
Related
I have some sections linked to some a tags.
i tried scroll behaviour : smooth on body : it didn't worrk.
i applied it to HTML : It worked.
So what am i missing ? what is the diference between the two ?
body {
scroll-behavior: smooth;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
the code is here
I have to display some item card. Each card has min-width property. When my screen size change, card size also changed. Because of that, I am facing a problem. That is, the last item/items takes whole area. Is it possible to keep a minimum width for each card, though it is last item or not? Please help.
Problem:
Attempt:
Please find in codesandbox: https://codesandbox.io/s/multiple-items-arrange-926fx
It sounds like you also want to specify a max-width for your cards.
In your example it could simply be:
const Container = styled.div`
flex: 1;
margin: 5px;
max-width: 300px;
min-width: 280px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5fbfd;
position: relative;
&:hover ${Info} {
opacity: 1;
}
`;
You can of course also leave max-width: 280px if you don't wish to change the width of the elements at all.
Additionally you can add justify-content: flex-start to the container to make it look less weird on resizes. In your example:
const Container = styled.div`
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
`;
I cant get this too work. Im using react and styled components and my justify/aligning isnt working.
div - set to flex, flex-direction is column
div - header div
div - body div, flex grow set to 1 so that the flexbox takes up the full height of the container
Now the flex item for the body takes up the full height (good) and im trying to center the content in the middle of this div. I have tried all combinations of align/justify on both the parent and body div but it doesnt work and im not sure why.
Heres my code
const Div = styled.div`
display: flex;
flex-direction: column;
min-height: 100vh;
justify-items: center;
& > * :nth-child(2){
flex-grow: 1;
background-color: red;
/* position:relative; */
/* align-self: center; */
}
`
const OuterWrapper = styled.div`
padding: 10vw 1.5rem;
overflow: hidden;
// this is the div that contains content that i want to center
Can anyone see why its not working?
On your wrapper:
display: flex;
justify-content: center;
align-items: center;
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 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/