Inheriting the div height
0
I have following html snippet. I want the div which has background color as red to get the same height as the total of the divs with height 15.56 + 77.33 + 73.33
<body>
<!-- outer div -->
<div style="background-color:gray;">
<div style="background-color: black; float: left;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red; display: inline-block; height: inherit;">
Should be red!
</div>
</div>
<body>
Image depicting how its appearing currently
javascript html css stylesheet
edited Nov 12 at 7:42
Krupesh Kotecha
2,05011134
asked Nov 12 at 7:10
Sharath
12
add a comment |
0
I have following html snippet. I want the div which has background color as red to get the same height as the total of the divs with height 15.56 + 77.33 + 73.33
<body>
<!-- outer div -->
<div style="background-color:gray;">
<div style="background-color: black; float: left;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red; display: inline-block; height: inherit;">
Should be red!
</div>
</div>
<body>
Image depicting how its appearing currently
javascript html css stylesheet
edited Nov 12 at 7:42
Krupesh Kotecha
2,05011134
asked Nov 12 at 7:10
Sharath
12
inherit is supposed to work between parent and child elements and not to the siblings
– Diwa
Nov 12 at 7:19
add a comment |
0
0
0
I have following html snippet. I want the div which has background color as red to get the same height as the total of the divs with height 15.56 + 77.33 + 73.33
<body>
<!-- outer div -->
<div style="background-color:gray;">
<div style="background-color: black; float: left;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red; display: inline-block; height: inherit;">
Should be red!
</div>
</div>
<body>
Image depicting how its appearing currently
javascript html css stylesheet
edited Nov 12 at 7:42
Krupesh Kotecha
2,05011134
asked Nov 12 at 7:10
Sharath
12
I have following html snippet. I want the div which has background color as red to get the same height as the total of the divs with height 15.56 + 77.33 + 73.33
<body>
<!-- outer div -->
<div style="background-color:gray;">
<div style="background-color: black; float: left;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red; display: inline-block; height: inherit;">
Should be red!
</div>
</div>
<body>
Image depicting how its appearing currently
javascript html css stylesheet
javascript html css stylesheet
edited Nov 12 at 7:42
Krupesh Kotecha
2,05011134
asked Nov 12 at 7:10
Sharath
12
edited Nov 12 at 7:42
Krupesh Kotecha
2,05011134
asked Nov 12 at 7:10
Sharath
12
edited Nov 12 at 7:42
Krupesh Kotecha
2,05011134
edited Nov 12 at 7:42
Krupesh Kotecha
2,05011134
edited Nov 12 at 7:42
Krupesh Kotecha
2,05011134
2,05011134
asked Nov 12 at 7:10
Sharath
12
asked Nov 12 at 7:10
Sharath
12
asked Nov 12 at 7:10
Sharath
12
12
inherit is supposed to work between parent and child elements and not to the siblings
– Diwa
Nov 12 at 7:19
add a comment |
inherit is supposed to work between parent and child elements and not to the siblings
– Diwa
Nov 12 at 7:19
inherit is supposed to work between parent and child elements and not to the siblings
– Diwa
Nov 12 at 7:19
inherit is supposed to work between parent and child elements and not to the siblings
– Diwa
Nov 12 at 7:19
add a comment |
1 Answer
1
active
oldest
votes
6
Set display:flex to wrap div (then float not needed)
You tried to set height: inherit; and it didn't work because you want to set height to DOM as sibling DOM and not as parent
The inherit keyword specifies that a property should inherit its value
from its parent element.
.outerdisplay:flex<body>
<!-- outer div -->
<div style="background-color:gray;" class="outer">
<div style="background-color: black;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red;">
Should be red!
</div>
</div>
<body>answered Nov 12 at 7:17
לבני מלכה
9,1161525
taht what you mean?
– לבני מלכה
Nov 12 at 7:17
1
it seems like he doesn't know how to use height inherit. height inherit makes the height relative to the parent. He has no height attribute for the parent. he just doesn't understand what height inherit is. It is not what he thinks it is.
– jack blank
Nov 12 at 7:20
How about using .outerheight:-webkit-fill-available; ?
– Diwa
Nov 12 at 7:22
when the hight shall be defined by children (or grandchildren) nodes (blue, green, orange), the parent sibling (red) cannot know the height. But the css flex-property with all its additional functionality will solve your problem link
– chrissharkman
Nov 12 at 7:22
1
@jackblank I will add explain
– לבני מלכה
Nov 12 at 7:24
|
show 5 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53257359%2finheriting-the-div-height%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
6
Set display:flex to wrap div (then float not needed)
You tried to set height: inherit; and it didn't work because you want to set height to DOM as sibling DOM and not as parent
The inherit keyword specifies that a property should inherit its value
from its parent element.
.outerdisplay:flex<body>
<!-- outer div -->
<div style="background-color:gray;" class="outer">
<div style="background-color: black;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red;">
Should be red!
</div>
</div>
<body>answered Nov 12 at 7:17
לבני מלכה
9,1161525
taht what you mean?
– לבני מלכה
Nov 12 at 7:17
1
it seems like he doesn't know how to use height inherit. height inherit makes the height relative to the parent. He has no height attribute for the parent. he just doesn't understand what height inherit is. It is not what he thinks it is.
– jack blank
Nov 12 at 7:20
How about using .outerheight:-webkit-fill-available; ?
– Diwa
Nov 12 at 7:22
when the hight shall be defined by children (or grandchildren) nodes (blue, green, orange), the parent sibling (red) cannot know the height. But the css flex-property with all its additional functionality will solve your problem link
– chrissharkman
Nov 12 at 7:22
1
@jackblank I will add explain
– לבני מלכה
Nov 12 at 7:24
|
show 5 more comments
6
Set display:flex to wrap div (then float not needed)
You tried to set height: inherit; and it didn't work because you want to set height to DOM as sibling DOM and not as parent
The inherit keyword specifies that a property should inherit its value
from its parent element.
.outerdisplay:flex<body>
<!-- outer div -->
<div style="background-color:gray;" class="outer">
<div style="background-color: black;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red;">
Should be red!
</div>
</div>
<body>answered Nov 12 at 7:17
לבני מלכה
9,1161525
taht what you mean?
– לבני מלכה
Nov 12 at 7:17
1
it seems like he doesn't know how to use height inherit. height inherit makes the height relative to the parent. He has no height attribute for the parent. he just doesn't understand what height inherit is. It is not what he thinks it is.
– jack blank
Nov 12 at 7:20
How about using .outerheight:-webkit-fill-available; ?
– Diwa
Nov 12 at 7:22
when the hight shall be defined by children (or grandchildren) nodes (blue, green, orange), the parent sibling (red) cannot know the height. But the css flex-property with all its additional functionality will solve your problem link
– chrissharkman
Nov 12 at 7:22
1
@jackblank I will add explain
– לבני מלכה
Nov 12 at 7:24
|
show 5 more comments
6
6
6
Set display:flex to wrap div (then float not needed)
You tried to set height: inherit; and it didn't work because you want to set height to DOM as sibling DOM and not as parent
The inherit keyword specifies that a property should inherit its value
from its parent element.
.outerdisplay:flex<body>
<!-- outer div -->
<div style="background-color:gray;" class="outer">
<div style="background-color: black;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red;">
Should be red!
</div>
</div>
<body>answered Nov 12 at 7:17
לבני מלכה
9,1161525
Set display:flex to wrap div (then float not needed)
You tried to set height: inherit; and it didn't work because you want to set height to DOM as sibling DOM and not as parent
The inherit keyword specifies that a property should inherit its value
from its parent element.
.outerdisplay:flex<body>
<!-- outer div -->
<div style="background-color:gray;" class="outer">
<div style="background-color: black;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red;">
Should be red!
</div>
</div>
<body>.outerdisplay:flex<body>
<!-- outer div -->
<div style="background-color:gray;" class="outer">
<div style="background-color: black;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red;">
Should be red!
</div>
</div>
<body>.outerdisplay:flex<body>
<!-- outer div -->
<div style="background-color:gray;" class="outer">
<div style="background-color: black;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red;">
Should be red!
</div>
</div>
<body>answered Nov 12 at 7:17
לבני מלכה
9,1161525
edited Nov 12 at 7:28
answered Nov 12 at 7:17
לבני מלכה
9,1161525
answered Nov 12 at 7:17
לבני מלכה
9,1161525
answered Nov 12 at 7:17
לבני מלכה
9,1161525
9,1161525
taht what you mean?
– לבני מלכה
Nov 12 at 7:17
1
it seems like he doesn't know how to use height inherit. height inherit makes the height relative to the parent. He has no height attribute for the parent. he just doesn't understand what height inherit is. It is not what he thinks it is.
– jack blank
Nov 12 at 7:20
How about using .outerheight:-webkit-fill-available; ?
– Diwa
Nov 12 at 7:22
when the hight shall be defined by children (or grandchildren) nodes (blue, green, orange), the parent sibling (red) cannot know the height. But the css flex-property with all its additional functionality will solve your problem link
– chrissharkman
Nov 12 at 7:22
1
@jackblank I will add explain
– לבני מלכה
Nov 12 at 7:24
|
show 5 more comments
taht what you mean?
– לבני מלכה
Nov 12 at 7:17
1
it seems like he doesn't know how to use height inherit. height inherit makes the height relative to the parent. He has no height attribute for the parent. he just doesn't understand what height inherit is. It is not what he thinks it is.
– jack blank
Nov 12 at 7:20
How about using .outerheight:-webkit-fill-available; ?
– Diwa
Nov 12 at 7:22
when the hight shall be defined by children (or grandchildren) nodes (blue, green, orange), the parent sibling (red) cannot know the height. But the css flex-property with all its additional functionality will solve your problem link
– chrissharkman
Nov 12 at 7:22
1
@jackblank I will add explain
– לבני מלכה
Nov 12 at 7:24
taht what you mean?
– לבני מלכה
Nov 12 at 7:17
taht what you mean?
– לבני מלכה
Nov 12 at 7:17
1
1
it seems like he doesn't know how to use height inherit. height inherit makes the height relative to the parent. He has no height attribute for the parent. he just doesn't understand what height inherit is. It is not what he thinks it is.
– jack blank
Nov 12 at 7:20
it seems like he doesn't know how to use height inherit. height inherit makes the height relative to the parent. He has no height attribute for the parent. he just doesn't understand what height inherit is. It is not what he thinks it is.
– jack blank
Nov 12 at 7:20
How about using .outerheight:-webkit-fill-available; ?
– Diwa
Nov 12 at 7:22
How about using .outerheight:-webkit-fill-available; ?
– Diwa
Nov 12 at 7:22
when the hight shall be defined by children (or grandchildren) nodes (blue, green, orange), the parent sibling (red) cannot know the height. But the css flex-property with all its additional functionality will solve your problem link
– chrissharkman
Nov 12 at 7:22
when the hight shall be defined by children (or grandchildren) nodes (blue, green, orange), the parent sibling (red) cannot know the height. But the css flex-property with all its additional functionality will solve your problem link
– chrissharkman
Nov 12 at 7:22
1
1
@jackblank I will add explain
– לבני מלכה
Nov 12 at 7:24
@jackblank I will add explain
– לבני מלכה
Nov 12 at 7:24
|
show 5 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53257359%2finheriting-the-div-height%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
inherit is supposed to work between parent and child elements and not to the siblings
– Diwa
Nov 12 at 7:19