Tag : html , By : Star Gryphon
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Please clarify - do you want solid green at the bottom? If so, just set a green background for body... body {
background-color:#060;
}
|
How to stretch a div vertically to the footer, and stretch to fit content?
Date : March 29 2020, 07:55 AM
|
How to stick the footer to bottom and stretch sidebar and content divs to the footer?
Date : March 29 2020, 07:55 AM
help you fix your problem How do I stick the footer to the bottom of the screen and stretch sidebar and content divs to the footer? Is it possible without using JavaScript? I have found ways to stick the footer to bottom, but I don't know how to make the sidebar equal i size to the content if it has less text. , for the flex model, i would go this way: body * {
box-sizing: border-box;/* includes borders & padding into size calculation*/
white-space: pre;/* demo purpose only */
}
html:hover {font-size:2em;/* demo purpose only */}
html {
height: 100%;/* needed so can be inherited & used by body */
}
body {
height: 100%;/* it can grow */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
margin: 0;/* reset */
}
main {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;/* fill up whole space avalaible */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;/* inbrication for side by side same height children */
}
header,
footer {
background: #7092BF;
border: solid;
width: 100%;
/* no height or flex value needed */
}
section {
border: solid;
background: #9AD9EA;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1/* fill up whole space avalaible */
}
aside {
border: solid;
width: 200px;/* any value/unit */
background: #3E48CC
}
<header> any height header</header>
<main>
<aside> aside
aside
aside
aside </aside>
<section> Hover me & test me full page too
content
content
content
content </section>
</main>
<footer> any height footer
any height footer</footer>
|
Tag : html , By : Steve Jones
Date : March 29 2020, 07:55 AM
will help you I'm not sure what you're trying to do, but Bootstrap col's should always be inside row.. <footer>
<div class="container">
<div class="row">
<div id="coisas" class="col-6">
<ul class="row list-unstyled">
<li class="col-1"><img src="//placehold.it/40"></li>
<li class="col-1"><img src="//placehold.it/40"></li>
<li class="col-1"><img src="//placehold.it/40"></li>
</ul>
<div id="nothing" class="col-6">
</div>
</div>
</div>
</div>
</footer>
|
Tag : css , By : Pieter Taelman
Date : March 29 2020, 07:55 AM
|
Boards Message :
Related QUESTIONS :