Why min-height style have no effect for a div
0
In my html definition I have 4 divs: wrapper (container) and 3 inner aligned vertically:
#wrapper {
width: 80%;
height: 90vh;
margin-top: 5vh;
margin-left: 10%;
margin-right: 10%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #e2e2e2;
border-radius: 5px;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
div.editor {
width: 100%;
height: 60%;
}
#header {
width: 100%;
height: 15%;
min-height: 75px;
}
#footer {
width: 100%;
height: 25%;
min-height: 108px;
display: flex;
flex-direction: row;
justify-content: center;
/* Centering y-axis */
flex-flow: row nowrap;
align-items: center;
}<head>
<link rel="stylesheet" href="/stylesheets/style.css">
<title>Web Editor</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Web Editor</h1>
</div>
<div class="editor" id="editor"></div>
<div id="footer">
</div>
</div>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
</script>
</body>min-height works fine for the header but does not work for the footer - can shrink to zero. What is the problem? How to solve?
html css ace-editor
asked Nov 26 '18 at 13:02
Aleksey KontsevichAleksey Kontsevich
1,35021862
|
show 5 more comments
0
In my html definition I have 4 divs: wrapper (container) and 3 inner aligned vertically:
#wrapper {
width: 80%;
height: 90vh;
margin-top: 5vh;
margin-left: 10%;
margin-right: 10%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #e2e2e2;
border-radius: 5px;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
div.editor {
width: 100%;
height: 60%;
}
#header {
width: 100%;
height: 15%;
min-height: 75px;
}
#footer {
width: 100%;
height: 25%;
min-height: 108px;
display: flex;
flex-direction: row;
justify-content: center;
/* Centering y-axis */
flex-flow: row nowrap;
align-items: center;
}<head>
<link rel="stylesheet" href="/stylesheets/style.css">
<title>Web Editor</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Web Editor</h1>
</div>
<div class="editor" id="editor"></div>
<div id="footer">
</div>
</div>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
</script>
</body>min-height works fine for the header but does not work for the footer - can shrink to zero. What is the problem? How to solve?
html css ace-editor
asked Nov 26 '18 at 13:02
Aleksey KontsevichAleksey Kontsevich
1,35021862
5
You'll find that more people will be able to help you if you provide the HTML output instead of the Pug source code.
– Quentin
Nov 26 '18 at 13:03
What does ace-editor have to do with this? Are you trying to style it? Is it rewriting your CSS? You haven't included any JS code that would load it. You should provide a Minimal, Complete, and Verifiable example, preferably in the form of a live demo. If Ace Editor isn't relevant, don't mention it. If it is, provide the code so we can see what it is doing.
– Quentin
Nov 26 '18 at 13:04
@Quentin, question is edited, code snippet added. Seems ace editor is not the issue: reproducible with default empty div.
– Aleksey Kontsevich
Nov 26 '18 at 13:55
jsfiddle.net/0o1mrapd/25 your code works. maybe there are some styles from the theme that override your custom styles
– Mihai T
Nov 26 '18 at 13:55
@MihaiT, hmm, yes works, strange. Could footer content be the cause?!
– Aleksey Kontsevich
Nov 26 '18 at 14:00
|
show 5 more comments
0
0
0
0
In my html definition I have 4 divs: wrapper (container) and 3 inner aligned vertically:
#wrapper {
width: 80%;
height: 90vh;
margin-top: 5vh;
margin-left: 10%;
margin-right: 10%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #e2e2e2;
border-radius: 5px;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
div.editor {
width: 100%;
height: 60%;
}
#header {
width: 100%;
height: 15%;
min-height: 75px;
}
#footer {
width: 100%;
height: 25%;
min-height: 108px;
display: flex;
flex-direction: row;
justify-content: center;
/* Centering y-axis */
flex-flow: row nowrap;
align-items: center;
}<head>
<link rel="stylesheet" href="/stylesheets/style.css">
<title>Web Editor</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Web Editor</h1>
</div>
<div class="editor" id="editor"></div>
<div id="footer">
</div>
</div>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
</script>
</body>min-height works fine for the header but does not work for the footer - can shrink to zero. What is the problem? How to solve?
html css ace-editor
asked Nov 26 '18 at 13:02
Aleksey KontsevichAleksey Kontsevich
1,35021862
In my html definition I have 4 divs: wrapper (container) and 3 inner aligned vertically:
#wrapper {
width: 80%;
height: 90vh;
margin-top: 5vh;
margin-left: 10%;
margin-right: 10%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #e2e2e2;
border-radius: 5px;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
div.editor {
width: 100%;
height: 60%;
}
#header {
width: 100%;
height: 15%;
min-height: 75px;
}
#footer {
width: 100%;
height: 25%;
min-height: 108px;
display: flex;
flex-direction: row;
justify-content: center;
/* Centering y-axis */
flex-flow: row nowrap;
align-items: center;
}<head>
<link rel="stylesheet" href="/stylesheets/style.css">
<title>Web Editor</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Web Editor</h1>
</div>
<div class="editor" id="editor"></div>
<div id="footer">
</div>
</div>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
</script>
</body>min-height works fine for the header but does not work for the footer - can shrink to zero. What is the problem? How to solve?
#wrapper {
width: 80%;
height: 90vh;
margin-top: 5vh;
margin-left: 10%;
margin-right: 10%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #e2e2e2;
border-radius: 5px;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
div.editor {
width: 100%;
height: 60%;
}
#header {
width: 100%;
height: 15%;
min-height: 75px;
}
#footer {
width: 100%;
height: 25%;
min-height: 108px;
display: flex;
flex-direction: row;
justify-content: center;
/* Centering y-axis */
flex-flow: row nowrap;
align-items: center;
}<head>
<link rel="stylesheet" href="/stylesheets/style.css">
<title>Web Editor</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Web Editor</h1>
</div>
<div class="editor" id="editor"></div>
<div id="footer">
</div>
</div>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
</script>
</body> #wrapper {
width: 80%;
height: 90vh;
margin-top: 5vh;
margin-left: 10%;
margin-right: 10%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #e2e2e2;
border-radius: 5px;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
div.editor {
width: 100%;
height: 60%;
}
#header {
width: 100%;
height: 15%;
min-height: 75px;
}
#footer {
width: 100%;
height: 25%;
min-height: 108px;
display: flex;
flex-direction: row;
justify-content: center;
/* Centering y-axis */
flex-flow: row nowrap;
align-items: center;
}<head>
<link rel="stylesheet" href="/stylesheets/style.css">
<title>Web Editor</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Web Editor</h1>
</div>
<div class="editor" id="editor"></div>
<div id="footer">
</div>
</div>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
</script>
</body>html css ace-editor
html css ace-editor
asked Nov 26 '18 at 13:02
Aleksey KontsevichAleksey Kontsevich
1,35021862
asked Nov 26 '18 at 13:02
Aleksey KontsevichAleksey Kontsevich
1,35021862
edited Nov 26 '18 at 14:21
Aleksey Kontsevich
asked Nov 26 '18 at 13:02
Aleksey KontsevichAleksey Kontsevich
1,35021862
asked Nov 26 '18 at 13:02
Aleksey KontsevichAleksey Kontsevich
1,35021862
asked Nov 26 '18 at 13:02
Aleksey KontsevichAleksey Kontsevich
1,35021862
1,35021862
5
You'll find that more people will be able to help you if you provide the HTML output instead of the Pug source code.
– Quentin
Nov 26 '18 at 13:03
What does ace-editor have to do with this? Are you trying to style it? Is it rewriting your CSS? You haven't included any JS code that would load it. You should provide a Minimal, Complete, and Verifiable example, preferably in the form of a live demo. If Ace Editor isn't relevant, don't mention it. If it is, provide the code so we can see what it is doing.
– Quentin
Nov 26 '18 at 13:04
@Quentin, question is edited, code snippet added. Seems ace editor is not the issue: reproducible with default empty div.
– Aleksey Kontsevich
Nov 26 '18 at 13:55
jsfiddle.net/0o1mrapd/25 your code works. maybe there are some styles from the theme that override your custom styles
– Mihai T
Nov 26 '18 at 13:55
@MihaiT, hmm, yes works, strange. Could footer content be the cause?!
– Aleksey Kontsevich
Nov 26 '18 at 14:00
|
show 5 more comments
5
You'll find that more people will be able to help you if you provide the HTML output instead of the Pug source code.
– Quentin
Nov 26 '18 at 13:03
What does ace-editor have to do with this? Are you trying to style it? Is it rewriting your CSS? You haven't included any JS code that would load it. You should provide a Minimal, Complete, and Verifiable example, preferably in the form of a live demo. If Ace Editor isn't relevant, don't mention it. If it is, provide the code so we can see what it is doing.
– Quentin
Nov 26 '18 at 13:04
@Quentin, question is edited, code snippet added. Seems ace editor is not the issue: reproducible with default empty div.
– Aleksey Kontsevich
Nov 26 '18 at 13:55
jsfiddle.net/0o1mrapd/25 your code works. maybe there are some styles from the theme that override your custom styles
– Mihai T
Nov 26 '18 at 13:55
@MihaiT, hmm, yes works, strange. Could footer content be the cause?!
– Aleksey Kontsevich
Nov 26 '18 at 14:00
5
5
You'll find that more people will be able to help you if you provide the HTML output instead of the Pug source code.
– Quentin
Nov 26 '18 at 13:03
You'll find that more people will be able to help you if you provide the HTML output instead of the Pug source code.
– Quentin
Nov 26 '18 at 13:03
What does ace-editor have to do with this? Are you trying to style it? Is it rewriting your CSS? You haven't included any JS code that would load it. You should provide a Minimal, Complete, and Verifiable example, preferably in the form of a live demo. If Ace Editor isn't relevant, don't mention it. If it is, provide the code so we can see what it is doing.
– Quentin
Nov 26 '18 at 13:04
What does ace-editor have to do with this? Are you trying to style it? Is it rewriting your CSS? You haven't included any JS code that would load it. You should provide a Minimal, Complete, and Verifiable example, preferably in the form of a live demo. If Ace Editor isn't relevant, don't mention it. If it is, provide the code so we can see what it is doing.
– Quentin
Nov 26 '18 at 13:04
@Quentin, question is edited, code snippet added. Seems ace editor is not the issue: reproducible with default empty div.
– Aleksey Kontsevich
Nov 26 '18 at 13:55
@Quentin, question is edited, code snippet added. Seems ace editor is not the issue: reproducible with default empty div.
– Aleksey Kontsevich
Nov 26 '18 at 13:55
jsfiddle.net/0o1mrapd/25 your code works. maybe there are some styles from the theme that override your custom styles
– Mihai T
Nov 26 '18 at 13:55
jsfiddle.net/0o1mrapd/25 your code works. maybe there are some styles from the theme that override your custom styles
– Mihai T
Nov 26 '18 at 13:55
@MihaiT, hmm, yes works, strange. Could footer content be the cause?!
– Aleksey Kontsevich
Nov 26 '18 at 14:00
@MihaiT, hmm, yes works, strange. Could footer content be the cause?!
– Aleksey Kontsevich
Nov 26 '18 at 14:00
|
show 5 more comments
2 Answers
2
active
oldest
votes
1
Please change footer background colour or wrapper background colour and try to reduce height less then min-height.You can check that min-height is applying.
answered Nov 27 '18 at 5:13
Falguni PrajapatiFalguni Prajapati
1317
add a comment |
0
After adding marker colors to the divs it was hard to understand the cause:
problem is footer div does not have background and therefore looked like shrinked on small screen height. Need to add grey background to it or put outside wrapper.
answered Nov 26 '18 at 14:26
Aleksey KontsevichAleksey Kontsevich
1,35021862
add a comment |
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%2f53481728%2fwhy-min-height-style-have-no-effect-for-a-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Please change footer background colour or wrapper background colour and try to reduce height less then min-height.You can check that min-height is applying.
answered Nov 27 '18 at 5:13
Falguni PrajapatiFalguni Prajapati
1317
add a comment |
1
Please change footer background colour or wrapper background colour and try to reduce height less then min-height.You can check that min-height is applying.
answered Nov 27 '18 at 5:13
Falguni PrajapatiFalguni Prajapati
1317
add a comment |
1
1
1
Please change footer background colour or wrapper background colour and try to reduce height less then min-height.You can check that min-height is applying.
answered Nov 27 '18 at 5:13
Falguni PrajapatiFalguni Prajapati
1317
Please change footer background colour or wrapper background colour and try to reduce height less then min-height.You can check that min-height is applying.
answered Nov 27 '18 at 5:13
Falguni PrajapatiFalguni Prajapati
1317
answered Nov 27 '18 at 5:13
Falguni PrajapatiFalguni Prajapati
1317
answered Nov 27 '18 at 5:13
Falguni PrajapatiFalguni Prajapati
1317
answered Nov 27 '18 at 5:13
Falguni PrajapatiFalguni Prajapati
1317
1317
add a comment |
add a comment |
0
After adding marker colors to the divs it was hard to understand the cause:
problem is footer div does not have background and therefore looked like shrinked on small screen height. Need to add grey background to it or put outside wrapper.
answered Nov 26 '18 at 14:26
Aleksey KontsevichAleksey Kontsevich
1,35021862
add a comment |
0
After adding marker colors to the divs it was hard to understand the cause:
problem is footer div does not have background and therefore looked like shrinked on small screen height. Need to add grey background to it or put outside wrapper.
answered Nov 26 '18 at 14:26
Aleksey KontsevichAleksey Kontsevich
1,35021862
add a comment |
0
0
0
After adding marker colors to the divs it was hard to understand the cause:
problem is footer div does not have background and therefore looked like shrinked on small screen height. Need to add grey background to it or put outside wrapper.
answered Nov 26 '18 at 14:26
Aleksey KontsevichAleksey Kontsevich
1,35021862
After adding marker colors to the divs it was hard to understand the cause:
problem is footer div does not have background and therefore looked like shrinked on small screen height. Need to add grey background to it or put outside wrapper.
answered Nov 26 '18 at 14:26
Aleksey KontsevichAleksey Kontsevich
1,35021862
answered Nov 26 '18 at 14:26
Aleksey KontsevichAleksey Kontsevich
1,35021862
answered Nov 26 '18 at 14:26
Aleksey KontsevichAleksey Kontsevich
1,35021862
answered Nov 26 '18 at 14:26
Aleksey KontsevichAleksey Kontsevich
1,35021862
1,35021862
add a comment |
add a comment |
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.
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%2f53481728%2fwhy-min-height-style-have-no-effect-for-a-div%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
5
You'll find that more people will be able to help you if you provide the HTML output instead of the Pug source code.
– Quentin
Nov 26 '18 at 13:03
What does ace-editor have to do with this? Are you trying to style it? Is it rewriting your CSS? You haven't included any JS code that would load it. You should provide a Minimal, Complete, and Verifiable example, preferably in the form of a live demo. If Ace Editor isn't relevant, don't mention it. If it is, provide the code so we can see what it is doing.
– Quentin
Nov 26 '18 at 13:04
@Quentin, question is edited, code snippet added. Seems ace editor is not the issue: reproducible with default empty div.
– Aleksey Kontsevich
Nov 26 '18 at 13:55
jsfiddle.net/0o1mrapd/25 your code works. maybe there are some styles from the theme that override your custom styles
– Mihai T
Nov 26 '18 at 13:55
@MihaiT, hmm, yes works, strange. Could footer content be the cause?!
– Aleksey Kontsevich
Nov 26 '18 at 14:00