CODEWITHSUNDEEP
csshtmlflexbox
Digital Human
Digital Human

Reputation: 1637

Basis simple Flex layout

Can you help with the following?

<div id="stage" class="flex-container">
            <header>
                <b>Top content</b>
            </header>
            <aside>
                Right
            </aside>
            <footer>
                Footer
            </footer>
        </div>

I would like to have aside being 22% width and 88% height, mounted to the right. I would like to have header begin 88% width and 88% height mounted to the top, and footer obvious being: 22 height and 100% width mounted to the floor ;)

I have been fighting with this issue for a day now. Hope you can help me out.

Upvotes: 2

Views: 41

Answers (2)

Digital Human
Digital Human

Reputation: 1637

Aaaah i just found a solution !: Quite straight forward if you ask me.

body,html
{
    height:100%;
    width: 100%;
    margin: 0;
}
#stage
{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
aside
{
    background-color: red;
    height: 88%;
    position: absolute;
    right: 0;
    top: 0;
    width: 12%;
}
footer
{
    background-color: #ffc107;
    bottom: 0;
    color: #333;
    height: 12%;
    position: absolute;
    width: 100%;
}
header
{
    background-color: #3F51B5;
    color: #fff;
    height: 88%;
    left: 0;
    top: 0;
    position:absolute;
    width:88%;
}

Upvotes: 1

symlink
symlink

Reputation: 12218

Set the parent container to an explicit height (e.g. 400px):

#stage {
    height: 400px;
}

Then float aside and header next to each other inside a parent div (e.g. main), and apply a clearfix to main (e.g. with :after):

jsFiddle

Alternatively, if you want your layout to be 100% of the viewport's height, you can set html and body to 100%, and give #stage a height of 100% too:

html,body{
    100%;
}

#stage {
    border: .125em solid;
    height: 100%;
}

jsFiddle

Upvotes: 0

Related Questions