How can I set the height of an element relative to its grandparent element? [closed]
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
how can I set the "child" height relative to the body, while keeping the "parent" take the full height of the child?
html css
edited Nov 14 '18 at 3:32
isherwood
36.6k1081111
asked Nov 14 '18 at 3:10
alfredo ryelcius
125
closed as unclear what you're asking by Temani Afif, shellter, ekad, TylerH, Pearly Spencer Nov 14 '18 at 19:21
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
how can I set the "child" height relative to the body, while keeping the "parent" take the full height of the child?
html css
edited Nov 14 '18 at 3:32
isherwood
36.6k1081111
asked Nov 14 '18 at 3:10
alfredo ryelcius
125
closed as unclear what you're asking by Temani Afif, shellter, ekad, TylerH, Pearly Spencer Nov 14 '18 at 19:21
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
1
Why are you trying to accomplish this? If you provide the reason, we might be able to provide an alternative solution.
– Chris Happy
Nov 14 '18 at 3:12
I want to use the nth-child method, so I need a parent div
– alfredo ryelcius
Nov 14 '18 at 3:13
I want to set the height of the child to 50% of the body. I also want to use the nth child so I can alternate the design in my child div
– alfredo ryelcius
Nov 14 '18 at 3:15
You really can't do what you're asking without some other constraints. Will the body always be the height of the viewport? Will the parent element have a fixed or proportionate height?
– isherwood
Nov 14 '18 at 3:18
I have set the body to be 100% height. I want the parent element has the same height as the total of the height of the div, and I want to add some more child so the height of the body cant be set
– alfredo ryelcius
Nov 14 '18 at 3:20
add a comment |
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
how can I set the "child" height relative to the body, while keeping the "parent" take the full height of the child?
html css
edited Nov 14 '18 at 3:32
isherwood
36.6k1081111
asked Nov 14 '18 at 3:10
alfredo ryelcius
125
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
how can I set the "child" height relative to the body, while keeping the "parent" take the full height of the child?
html css
html css
edited Nov 14 '18 at 3:32
isherwood
36.6k1081111
asked Nov 14 '18 at 3:10
alfredo ryelcius
125
edited Nov 14 '18 at 3:32
isherwood
36.6k1081111
asked Nov 14 '18 at 3:10
alfredo ryelcius
125
edited Nov 14 '18 at 3:32
isherwood
36.6k1081111
edited Nov 14 '18 at 3:32
isherwood
36.6k1081111
edited Nov 14 '18 at 3:32
isherwood
36.6k1081111
36.6k1081111
asked Nov 14 '18 at 3:10
alfredo ryelcius
125
asked Nov 14 '18 at 3:10
alfredo ryelcius
125
asked Nov 14 '18 at 3:10
alfredo ryelcius
125
125
closed as unclear what you're asking by Temani Afif, shellter, ekad, TylerH, Pearly Spencer Nov 14 '18 at 19:21
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
closed as unclear what you're asking by Temani Afif, shellter, ekad, TylerH, Pearly Spencer Nov 14 '18 at 19:21
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
1
Why are you trying to accomplish this? If you provide the reason, we might be able to provide an alternative solution.
– Chris Happy
Nov 14 '18 at 3:12
I want to use the nth-child method, so I need a parent div
– alfredo ryelcius
Nov 14 '18 at 3:13
I want to set the height of the child to 50% of the body. I also want to use the nth child so I can alternate the design in my child div
– alfredo ryelcius
Nov 14 '18 at 3:15
You really can't do what you're asking without some other constraints. Will the body always be the height of the viewport? Will the parent element have a fixed or proportionate height?
– isherwood
Nov 14 '18 at 3:18
I have set the body to be 100% height. I want the parent element has the same height as the total of the height of the div, and I want to add some more child so the height of the body cant be set
– alfredo ryelcius
Nov 14 '18 at 3:20
add a comment |
1
Why are you trying to accomplish this? If you provide the reason, we might be able to provide an alternative solution.
– Chris Happy
Nov 14 '18 at 3:12
I want to use the nth-child method, so I need a parent div
– alfredo ryelcius
Nov 14 '18 at 3:13
I want to set the height of the child to 50% of the body. I also want to use the nth child so I can alternate the design in my child div
– alfredo ryelcius
Nov 14 '18 at 3:15
You really can't do what you're asking without some other constraints. Will the body always be the height of the viewport? Will the parent element have a fixed or proportionate height?
– isherwood
Nov 14 '18 at 3:18
I have set the body to be 100% height. I want the parent element has the same height as the total of the height of the div, and I want to add some more child so the height of the body cant be set
– alfredo ryelcius
Nov 14 '18 at 3:20
1
1
Why are you trying to accomplish this? If you provide the reason, we might be able to provide an alternative solution.
– Chris Happy
Nov 14 '18 at 3:12
Why are you trying to accomplish this? If you provide the reason, we might be able to provide an alternative solution.
– Chris Happy
Nov 14 '18 at 3:12
I want to use the nth-child method, so I need a parent div
– alfredo ryelcius
Nov 14 '18 at 3:13
I want to use the nth-child method, so I need a parent div
– alfredo ryelcius
Nov 14 '18 at 3:13
I want to set the height of the child to 50% of the body. I also want to use the nth child so I can alternate the design in my child div
– alfredo ryelcius
Nov 14 '18 at 3:15
I want to set the height of the child to 50% of the body. I also want to use the nth child so I can alternate the design in my child div
– alfredo ryelcius
Nov 14 '18 at 3:15
You really can't do what you're asking without some other constraints. Will the body always be the height of the viewport? Will the parent element have a fixed or proportionate height?
– isherwood
Nov 14 '18 at 3:18
You really can't do what you're asking without some other constraints. Will the body always be the height of the viewport? Will the parent element have a fixed or proportionate height?
– isherwood
Nov 14 '18 at 3:18
I have set the body to be 100% height. I want the parent element has the same height as the total of the height of the div, and I want to add some more child so the height of the body cant be set
– alfredo ryelcius
Nov 14 '18 at 3:20
I have set the body to be 100% height. I want the parent element has the same height as the total of the height of the div, and I want to add some more child so the height of the body cant be set
– alfredo ryelcius
Nov 14 '18 at 3:20
add a comment |
1 Answer
1
active
oldest
votes
If body is 100% of the viewport height, it's also 100 vh (viewport height) units high. You can use those to set your child elements:
body {
height: 100%; /* could also be "100vh" for better clarity */
}
.child {
height: 50vh; /* 50% of the height of the body and viewport
}
The parent element will then take the total height of the children, typically. You might have to fiddle with the overflow property on one or both, depending on their contents.
answered Nov 14 '18 at 3:22
isherwood
36.6k1081111
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If body is 100% of the viewport height, it's also 100 vh (viewport height) units high. You can use those to set your child elements:
body {
height: 100%; /* could also be "100vh" for better clarity */
}
.child {
height: 50vh; /* 50% of the height of the body and viewport
}
The parent element will then take the total height of the children, typically. You might have to fiddle with the overflow property on one or both, depending on their contents.
answered Nov 14 '18 at 3:22
isherwood
36.6k1081111
add a comment |
If body is 100% of the viewport height, it's also 100 vh (viewport height) units high. You can use those to set your child elements:
body {
height: 100%; /* could also be "100vh" for better clarity */
}
.child {
height: 50vh; /* 50% of the height of the body and viewport
}
The parent element will then take the total height of the children, typically. You might have to fiddle with the overflow property on one or both, depending on their contents.
answered Nov 14 '18 at 3:22
isherwood
36.6k1081111
add a comment |
If body is 100% of the viewport height, it's also 100 vh (viewport height) units high. You can use those to set your child elements:
body {
height: 100%; /* could also be "100vh" for better clarity */
}
.child {
height: 50vh; /* 50% of the height of the body and viewport
}
The parent element will then take the total height of the children, typically. You might have to fiddle with the overflow property on one or both, depending on their contents.
answered Nov 14 '18 at 3:22
isherwood
36.6k1081111
If body is 100% of the viewport height, it's also 100 vh (viewport height) units high. You can use those to set your child elements:
body {
height: 100%; /* could also be "100vh" for better clarity */
}
.child {
height: 50vh; /* 50% of the height of the body and viewport
}
The parent element will then take the total height of the children, typically. You might have to fiddle with the overflow property on one or both, depending on their contents.
answered Nov 14 '18 at 3:22
isherwood
36.6k1081111
edited Nov 14 '18 at 3:30
answered Nov 14 '18 at 3:22
isherwood
36.6k1081111
answered Nov 14 '18 at 3:22
isherwood
36.6k1081111
answered Nov 14 '18 at 3:22
isherwood
36.6k1081111
36.6k1081111
add a comment |
add a comment |
1
Why are you trying to accomplish this? If you provide the reason, we might be able to provide an alternative solution.
– Chris Happy
Nov 14 '18 at 3:12
I want to use the nth-child method, so I need a parent div
– alfredo ryelcius
Nov 14 '18 at 3:13
I want to set the height of the child to 50% of the body. I also want to use the nth child so I can alternate the design in my child div
– alfredo ryelcius
Nov 14 '18 at 3:15
You really can't do what you're asking without some other constraints. Will the body always be the height of the viewport? Will the parent element have a fixed or proportionate height?
– isherwood
Nov 14 '18 at 3:18
I have set the body to be 100% height. I want the parent element has the same height as the total of the height of the div, and I want to add some more child so the height of the body cant be set
– alfredo ryelcius
Nov 14 '18 at 3:20