The header has a dynamic height, how can the main take up the rest of the page height?
header {
margin: auto;
width: 50%;
height: auto;
}
h1 {
text-align: center;
}
main {
background-color: aqua;
}
<header>
<h1>Add new task in your list</h1>
<app-add-to-do-list></app-add-to-do-list>
</header>
<main>
</main>
To do this, you can use the vh property, which is viewport height, in the width and height of each one and define a height for each of them, example:
header{
height: 30vh;
}
main{
height: 70vh;
}
Also, you can add an overflow-scroll as well.
When you add height auto it only stretches to the size of it's content. If you would want the container to take some of the free space you have to add min-height: 20rem;
Here I have created codepen with examples:
https://codepen.io/brtskr-the-animator/pen/JjMQRbd
body{
min-height: 20rem;
background: #222;
color: white;
}
*{
margin: 0 0 2rem 0;
}
header{
height: auto;
border: 1px solid green;
}
.ex1{
height: 5rem;
border: 1px solid yellow;
}
.ex2{
min-height: 5rem;
border: 1px solid blue;
font-size: 6rem;
}
.ex3{
height: auto;
border: 1px solid pink;
font-size: 10rem;
}
Related
I want to center the text "name" horizontally and vertically inside the div "firstquad". I want the div to have 100% width and 25% height. But the div has much more than 100% width. For the text, I have set the top and left as 50%. The text should be centered and the div should fit the page horizontally but its like this. Any help?
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 25%;
top: 0%;
text-align: center;
background-color: blue;
}
#name {
position: relative;
top: 50%;
left: 50%;
color: white;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
Both div and h1 are block level elements by themselves.
Block level elements behave in such a way that
they create a line break before and after themselves
they grab as much horizontal space as they can get
Which means that with <div><h1></h1></div> you have a div that grabs as much horizontal space as available (full page width). Inside it, the h1 behaves the same, consuming all horizontal space that the surrounding div allows.
Now with position: relative; left: 50%; you do not change the width of the h1 - you simply change the position, where its rendering starts. Obviously, this leads to the h1 moving partly outside the div. Add borders so you understand:
body { margin: 30px; }
div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; }
<div><h1>Test</h1></div>
Now move the h1 (only slightly, so the effect is visible better):
body { margin: 30px; }
div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; position: relative; left: 20px; }
<div><h1>Test</h1></div>
css:
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 25%;
top: 0%;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
#name {
color: white;
}
body {
margin: 0%;
height: 100%;
background-color: cornsilk;
}
#firstquad {
height: 25%;
background-color: blue;
text-align: center;
}
#name {
color: white;
margin: 0;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
Is this what you are looking for?
Just change #name to #name {
color: white;
}
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 50%;
text-align: center;
background-color: blue !important;
}
#name {
color: white;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 3 years ago.
I need to use the calc function for width but it doesn't divide distance around.
HTML
<div class="container-card">
<div class="container-holder"></div>
</div>
SCSS
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
width: calc(100% - 14px);
height: 300px;
}
}
Here is an example:
https://jsfiddle.net/fze3L0w8/
In other words: I need 14px distance from left and right in every width.
You can use margin:auto; for adding space from both side. And you need to set it 100% - 28px
.container-card {
background-color: grey;
height: 500px;
}
.container-holder {
background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: auto;
}
<div class="container-card">
<div class="container-holder">
</div>
</div>
Just set a margin of 14px, and you will no longer need to set the width property:
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
margin: 14px;
height: 300px;
}
}
Here's an updated fiddle.
this is the solution:
background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: auto;
you need margin from left o rright also
you either set it 100% - 28px to reduce width by 14px right and left and set margin: auto; to center the div
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
width: calc(100% - 28px);
margin: auto;
height: 300px;
}
}
or only set margin:0px 14px; and no need to set width it will take parent width - margin
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
margin: 0px 14px;
height: 300px;
}
}
More elegant solution is that -
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: 0 auto;
}
}
Calc function will get 28px and to center an element inside another one. use margin: 0 auto;
Just center the container instead of this hard coded brittle approach with something like flex, then you can use whatever margin you want without it breaking.
.container-card {
display: flex;
justify-content: center;
background-color: grey;
height: 500px;
}
.container-holder {
background-color: gold;
margin: 0 14px;
width: 100%;
height: 300px;
}
<div class="container-card">
<div class="container-holder">
</div>
</div>
More elegant solution could be this
`
.container-card {
background-color: grey;
height: 500px;
.container-holder {
background-color: gold;
margin-left: 14px;
margin-right:14px;
height: 300px;
}
}
`
I have a simple layout which I took from MDN's flexbox page. It has a header and a main content area.
<header>header</header>
<div id='main'>
<article>article</article>
<aside>aside</aside>
</div>
I would like to have the main content area extend to the bottom of the viewport or further if it needs to accommodate its children. I tried fiddling with flexbox but I still can't specify that I want it to take up all space vertically like I can horizontally.
The only two options I can think of are:
A) Javascript to calculate the required height
B) Tiling a background image on the body to make it appear as though the content area is extended all the way down
Can anyone think of an alternatives to fill up the viewport and also contain children if the children extend past the bottom of n the screen?
https://jsfiddle.net/1cpcsvjr/5/
** Update ** I amended my jsfiddle with more content in the article sub element. The content will bleed out of the flex container.
#main
{
height: 100vh;
}
100vh means 100% of the viewport height, you can change this value if you need to.
you can set height to html an body to fill entitre window and use flex from body as well.
body {
font: 24px Helvetica;
background: #999999;
display:flex;
flex-flow: column;
}
html, body {
height:100%;
margin:0;
}
#main {
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row;
flex:1;/* fills entire space avalaible (or share evenly if sibblings)*/
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
background: #dddd88;
flex: 3 1 60%;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
background: #ccccff;
flex: 1 6 20%;
order: 1;
}
header {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
<header>header</header>
<div id='main'>
<article>article</article>
<aside>aside</aside>
</div>
https://jsfiddle.net/1cpcsvjr/2/
Flexbox solution.
You have to set the html & body elements to 100% height.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
font: 24px Helvetica;
background: #999999;
min-height: 100%;
display: flex;
flex-direction: column;
}
#main {
margin: 0px;
padding: 0px;
flex: 1;
background: pink;
display: flex;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
background: #dddd88;
flex: 3 1 60%;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
background: #ccccff;
flex: 1 6 20%;
order: 1;
}
header {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
<header>header</header>
<div id='main'>
<article>article</article>
<aside>aside</aside>
</div>
Before you roll your eyes and move on, I know how to solve this problem by using a fixed height and absolution positioning with top: and bottom:, but I want to solve it without using fixed heights. I want to learn more about CSS so I'm trying to solve this a different way.
I have set up a typical navbar running across the top, and then a scrolling content div below.
However! How do I fit the bottom scrolling div container to the remaining space without using absolute coordinates? I can't do position: absolute, because then I'd need to know the height of the navbar to set "top:". And I can't do "bottom: 0" because I'd have to specify a height.
Here's the JS filddle:
http://jsfiddle.net/8dugffz4/1/
The class of interest is ".result". I currently have the height fixed, which I don't want.
Thanks, y'all.
PT
CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
.navBar {
width: auto;
overflow: auto;
border-bottom: 1px solid #bbb;
}
.pageBar {
float: right;
}
.pager {
cursor: pointer;
float: left;
border: 1px solid #bbb;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin: 5px;
margin-left: 0px;
background: #eee;
color: #bbb;
}
.pager:hover {
background: #777;
border: 1px solid black;
color: white;
}
.fliph {
-ms-transform:scale(-1,1); /* IE 9 */
-moz-transform:scale(-1,1); /* Firefox */
-webkit-transform:scale(-1,1); /* Safari and Chrome */
-o-transform:scale(-1,1); /* Opera */
}
.results {
background: gray;
width: 100%;
height: 200px;
overflow: scroll;
}
.line {
height: 10em;
line-height: 10em;
border: 1px solid red;
}
HTML:
<body>
<div class='navBar'>
<div class='pageBar'>
<div class='pager'>◁</div>
<div class='pager'>1</div>
<div class='pager fliph'>◁</div>
</div>
</div>
<div class='results'>
<div class='line'>Line1</div>
<div class='line'>Line2</div>
<div class='line'>Line3</div>
<div class='line'>Line4</div>
</div>
</body>
Here's a solution that uses display: table and can actually achieve fluid heights:
http://jsfiddle.net/8dugffz4/8/
And a minimalistic snippet in case you want to see specifically what I did:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#table {
display: table;
height: 100%;
width: 100%;
}
#table > div {
display: table-row;
}
#navbar {
height: 45px;
opacity: .5;
}
#navbar > div {
height: 100%;
background: black;
}
#results {
height: 100%;
}
#results > div {
height: 100%;
overflow: auto;
background: green;
}
<div id="table">
<div id="navbar">
<div></div>
</div>
<div id="results">
<div></div>
</div>
</div>
If you're just looking for an alternative to the position: absolute method, you could use the height: 100% method:
html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }
Like so: http://jsfiddle.net/8dugffz4/7/
How do I remove the remaining space on the right:
HTML code:
<div class="wrapper">
<h1>Title 1</h1>
<h1>Title 1</h1>
<h1>Title 1</h1>
</div>
CSS code:
.wrapper {
height: 450px;
margin: 50px;
border-radius: 30px;
overflow: hidden;
background-color: #F00;
border: 1px solid #000;
display:block;
}
.wrapper a {
width: 33.3%;
height: 100%;
background-color: #444;
margin:0 auto;
float: left;
color: #fff;
text-decoration: none;
display:inline-block;
}
.wrapper a:nth-child(2) {
background-color: #333;
}
.wrapper a h1 {
width: 100%;
height: 70px;
text-align: center;
position: relative;
bottom: 0;
text-shadow: 1px 1px #000;
}
http://jsfiddle.net/6bXQ9/
the 3 blocks must be 33,3 % but the rest(0,1%) wont be filled, and ive i use 33,4% there will get 1 block lost when the page is smaller
what should i use? Thanks! and sorry for my bad english
width: 33.33% does the magic trick.
Is this what you want? http://jsfiddle.net/6bXQ9/5/
width: 33.33%;
Making Width: 33.33% solves your problem.