This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 months ago.
I want this element to cover 100% of the screen height, obviously not doing as so, any fixes?
I see that the div is 100% height of the section which is 100% of the body which is set as 100%.
<body>
<section id="Block1">
<div class="firstsection">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo magnam iusto quibusdam quas reiciendis fugit architecto consequatur similique distinctio dolore repudiandae rem illo alias iure sunt eos culpa, amet consectetur!</p>
</div>
</section>
</body>
CSS
body {
width: 100%;
height: 100%;
}
* {
padding: 0px;
margin: 0px;
}
.firstsection {
width: 50%;
height: 100%;
background-color: yellowgreen;
text-align: center;
}
#Block1 {
width: 100%;
height: 100%;
}
Use this for body:
body {
height: 100vh;
}
You need to set height and width 100% also for html,
html, body {
width: 100%;
height: 100%;
}
you can additionally use vh vw dimensions to set width and height on the whole screen
#Block1 {
width: 100vw;
height: 100vh;
}
Why no one is adding a snippet? body {height: 100vh;}
body {
width: 100%;
height: 100vh;
}
* {
padding: 0px;
margin: 0px;
}
.firstsection {
width: 50%;
height: 100%;
background-color: yellowgreen;
text-align: center;
}
#Block1 {
width: 100%;
height: 100%;
}
<body>
<section id="Block1">
<div class="firstsection">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo magnam iusto quibusdam quas reiciendis fugit architecto consequatur similique distinctio dolore repudiandae rem illo alias iure sunt eos culpa, amet consectetur!</p>
</div>
</section>
</body>
Related
I placed a text over an image, but when I increase the screen size the image won't follow, its just stuck at the same place, contrary to the text that responds to the screen-size and moves to the center.
.section2{
max-height: 20rem;
padding-top: 20px;
position: relative;
}
.section2 img{
padding: 20px
}
.abtus {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 60%;
font-size: 1rem;
text-align: center;
padding-top: 6rem;
}
<div class="section2">
<img src="assets/script.png" alt="">
<div class="abtus">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad cum architecto eius molestiae dolore est id vero voluptatem
repellat voluptas quo beatae nulla ex soluta deleniti impedit maxime, enim omnis?</p>
</div>
</div>
If you want to position an absolute element on a picture then you should:
1- put the image and the element in one container.
.container {
height: fit-content;
width: fit-content;
position: relative;
}
2- the image width should be 100% so it can resize according to its parent's width.
3- Use the container to resize the image, don't resize the image itself.
.section2{
max-height: fit-content;
width: 100vw;
position: relative;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.container {
height: fit-content;
width: fit-content;
position: relative;
border: 1px solid blue;
display: flex;
justify-content: center;
align-items: center;
}
.section2 img {
height: auto;
width: 80%;
border: 1px solid red;
}
.abtus {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 60%;
font-size: 1rem;
text-align: center;
padding-top: 6rem;
}
<div class="section2">
<div class="container">
<img src="https://cdn.pixabay.com/photo/2016/01/08/15/18/lizard-1128263_960_720.jpg" alt="">
<div class="abtus">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad cum architecto eius molestiae dolore est id vero voluptatem
repellat voluptas quo beatae nulla ex soluta deleniti impedit maxime, enim omnis?</p>
</div>
</div>
</div>
I think img tag must have width: 100% to follow the parent element size.
img {
width: 100%;
padding: 20px;
}
Please see the image below.
Image
I want to center the div horizontally but have it slightly to the left of the page. The problem is that I want the div to center horizontally and vertically when the window is minimized to the phone size.
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 50%;
}
.profile {
width: 480px;
height: 380px;
background-color: lightblue;
}
</style>
<div class="container">
<div class="profile">
<p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At corporis voluptatibus officiis? Minus architecto voluptatum ea enim eos exercitationem perferendis quae necessitatibus rerum mollitia, atque doloremque obcaecati unde officia soluta?</p>
</div>
</div>
Put this inside .profile
margin: auto;
and the div center horizontally.
But your code is not responsive, because of the fixed width width: 480px; in
.profile
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 50%;
}
.profile {
width: 480px;
height: 380px;
background-color: lightblue;
margin: auto;
}
</style>
<div class="container">
<div class="profile">
<p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At corporis voluptatibus officiis? Minus architecto voluptatum ea enim eos exercitationem perferendis quae necessitatibus rerum mollitia, atque doloremque obcaecati unde officia soluta?</p>
</div>
</div>
Try this for center the div vertically and horizontally
Run and view the snippet in fullscreen.
But you still have to change the code to your needs.
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 50%;
}
.profile {
width: 480px;
height: 380px;
background-color: lightblue;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class="container">
<div class="profile">
<p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At corporis voluptatibus officiis? Minus architecto voluptatum ea enim eos exercitationem perferendis quae necessitatibus rerum mollitia, atque doloremque obcaecati unde officia soluta?</p>
</div>
</div>
Try this for responsive your div on different devices, you don't need the container outside because the position of .profile is absolute, you can place this everywhere(alone) in your html code.
Change the code to your needs.
<style>
.profile {
width: 50%;
height: 50%;
background-color: lightblue;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class="profile">
<p class="about">CONTENT</p>
</div>
You can make the use of the z-index in css.
The z-index property specifies the stack order of an element.
<style>
.profile {
....
z-index: 100;
....
}
</style>
https://www.w3schools.com/cssref/pr_pos_z-index.asp
UPDATE FOR(I need the div to be positioned to the center-left of the page when viewed on desktop, but when you jump to mobile I want the div to jump to the center of the page)
Try this and fix the min-width for the desktop, too your needs:
#media only screen and (min-width: 1024px)
<style>
.profile {
width: 50%;
height: 50%;
background-color: lightblue;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (min-width: 1024px) {
.profile {
width: 300px;
height: 300px%;
background-color: red;
position: absolute;
left: 10%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
</style>
<div class="profile">
<p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At corporis voluptatibus officiis? Minus architecto voluptatum ea enim eos exercitationem perferendis quae necessitatibus rerum mollitia, atque doloremque obcaecati unde officia soluta?</p>
</div>
I have three divs in a conainter div. The container is 500px in height. Even after setting the flex grow property to 1 (in the container), the divs don't grow but when set on the elements themselves (child divs within container), they do grow. Is there something I'm missing?
.container {
display: flex;
flex: 1 1 0;
flex-direction: column;
height: 500px;
background-color: red;
}
div div {
flex-basis: 0;
margin: 10px;
border: white 4px solid;
background-color: burlywood;
}
<div class="container">
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia, deserunt necessitatibus! Quod beatae nulla necessitatibus odio recusandae nihil et totam officiis nisi in molestiae numquam, odit, commodi, repudiandae at dolor dolorem dolores fugiat
accusantium eum. Eaque sit repudiandae cum, autem perferendis repellendus accusantium? Sit consequatur ipsum sed dolores repudiandae minus.</p>
</div>
<div></div>
<div></div>
</div>
There is nothing wrong with this behaviour. The flex-grow property is meant to be applied on the flex item itself. It specifies how much the item will grow relative to the rest of the flexible items inside the same container.
No, that is correct. The flex-grow property is intended to be used on a flex item specifically, not on the flex container itself. Applying it to the container will do nothing.
.flex {
width: 350px;
height: 200px;
display: flex;
}
.box-1 {
flex-grow: 1;
background-color: red;
}
.box-2 {
flex-grow: 3;
background-color: blue;
}
.box-3 {
flex-grow: 2;
background-color: green;
}
.box-4 {
flex-grow: 1;
background-color: yellow;
}
.box-5 {
flex-grow: 1;
background-color: gray;
}
<div class="flex">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
<div class="box-5"></div>
<div>
.
My div element with the class user-list is getting displayed below .result but it should be placed right next to it.
I tried it with float: left but it doesn't work. How can I do it with flex?
.chat {
position: relative;
left: 10vw;
height: 95vh;
background-color: burlywood;
width: 80vw;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.result {
width: 80vw;
height: 80vh;
float: left;
background: red;
}
.user-list {
background-color: #F1F1F4;
float: left;
height: 100%;
overflow: auto;
width: 200px;
}
<div class="chat">
<div class="result"></div>
<div class="user-list">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia delectus, voluptatum ducimus ratione nemo dolor consequuntur maiores corrupti rerum architecto qui necessitatibus nulla, deserunt harum quaerat facere, eius et minus.
</div>
</div>
Use flex-direction: row instead of flex-direction: column on .chat element.
This question already has answers here:
Make a div fill the height of the remaining screen space
(42 answers)
Closed 6 years ago.
My website has 3 section, header(navbar)+middle(content)+footer(sitemap etc).
My header is a fixed height, my footer contain sitemap which may update time to time, therefore the footer height may increase.
I want to apply 100vh on my middle. How do I use something like .middle{height: calc(100vh - footer.height);}?
Flexbox is ideal for this, check the following layout:
Footer will dynamically grow/shrink depending on content.
Middle content will always be 100% - .footer as desired.
overflow: auto; on middle .content is set in case there is more content, this way it will avoid pushing footer.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.container {
display: flex;
flex-flow: column wrap;
justify-content: center;
height: 100%;
}
.header {
border: 1px solid red;
width: 100%;
height: 60px;
}
.content {
flex: 1;
width: 100%;
border: 1px solid gray;
overflow: auto;
}
.footer {
display: flex;
width: 100%;
border: 1px solid orange;
}
<div class="container">
<div class="header">navbar</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum repellendus neque repudiandae fugiat error blanditiis omnis nesciunt nostrum porro, officia vel cum deleniti adipisci nihil perferendis eos, veniam numquam, ipsum.</div>
<div class="footer">footer</div>
</div>