如何在容器内获取3个div以水平对齐，高度为100％

Question

EDIT: Alignment fixed by adding floats. Height still doesn't fill 100% though. Updated look: https://gyazo.com/4030d76c62c106fae5fbbb07f062efdd

I have a footer container in which I want to have 3 columns (I have made them green, white and red for now so it's easier for you to see). Currently they're stacking vertically but I want them to be beside eachother and have a height of 100% to fill the height of whatever the container's height is. Here is an image of what it looks liek at the moment, please ignore the large black boxes, these are just so I can see where stuff is on the page but will evenutally be transparent etc. https://gyazo.com/12d0642e5fd9518a663606668ec06311

They each have a width of 33% because I want to follow responsive practices and I've currently tried removing all padding and margins etc from every div.

Any help would be greatly appreciated, thank you.

HTML:

<div id="Page">

        <div id="content" class="wrapper">

        </div>      

        <div id="footer">
            <div id="footerContainer">
                <div id="footerLeft">
                    <p>
                    Test
                    </p>
                </div>
                <div id="footerCenter">
                    <p>
                    Test
                    </p>
                </div>
                <div id="footerRight">
                    <p>
                    Test
                    </p>
                </div>
            </div>    <!-- footerContainer -->
        </div> <!-- Footer -->

    </div> <!-- Page -->

CSS:

#content {
    background-color: black;
}

.wrapper {
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

#footer {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: black;
}

#footerContainer {
    width: 60%;
    max-height: 100%;
    margin: 0 auto;
}

#footerLeft {
    width: 33%;
    height: 100%;
    float: left;
    background-color: darkolivegreen;
    padding: 0;
}

#footerCenter {
    width: 33%;
    height: 100%;
    float: left;
    background-color: white;
    padding: 0;
}

#footerRight {
    width: 33%;
    height: 100%;
    float: left;
    background-color: firebrick;
    padding: 0;
}

Answer 1

Add display: flex to the #footerContainer rule, and change max-height: 100%; to height: 100%; in #footerContainer

 #content { background-color: black; } .wrapper { width: 60%; height: 100%; margin: 0 auto; } #footer { position: absolute; width: 100%; height: 300px; background-color: black; } #footerContainer { display: flex; width: 60%; height: 100%; margin: 0 auto; } #footerLeft { width: 33%; background-color: darkolivegreen; } #footerCenter { width: 33%; background-color: white; } #footerRight { width: 33%; background-color: firebrick; } 

 <div id="Page"> <div id="content" class="wrapper"> </div> <div id="footer"> <div id="footerContainer"> <div id="footerLeft"> <p> Test </p> </div> <div id="footerCenter"> <p> Test </p> </div> <div id="footerRight"> <p> Test </p> </div> </div> <!-- footerContainer --> </div> <!-- Footer --> </div> <!-- Page --> 

---

Here is a version where I simplified both markup and CSS

 #content { background-color: black; } .wrapper { width: 60%; height: 100%; margin: 0 auto; } #footer { position: absolute; width: 100%; height: 300px; background-color: black; display: flex; justify-content: center; } #footer > div { width: 20%; } #footerLeft { background-color: darkolivegreen; } #footerCenter { background-color: white; } #footerRight { background-color: firebrick; } 

 <div id="Page"> <div id="content" class="wrapper"> </div> <div id="footer"> <div id="footerLeft"> <p> Test </p> </div> <div id="footerCenter"> <p> Test </p> </div> <div id="footerRight"> <p> Test </p> </div> </div> <!-- Footer --> </div> <!-- Page --> 

---

One for older browsers, using display: table

 #content { background-color: black; } .wrapper { width: 60%; height: 100%; margin: 0 auto; } #footer { position: absolute; width: 100%; height: 300px; background-color: black; } #footerContainer { display: table; width: 60%; height: 100%; margin: 0 auto; } #footerContainer > div { display: table-cell; width: 33%; } #footerLeft { background-color: darkolivegreen; } #footerCenter { background-color: white; } #footerRight { background-color: firebrick; } 

 <div id="Page"> <div id="content" class="wrapper"> </div> <div id="footer"> <div id="footerContainer"> <div id="footerLeft"> <p> Test </p> </div> <div id="footerCenter"> <p> Test </p> </div> <div id="footerRight"> <p> Test </p> </div> </div> <!-- footerContainer --> </div> <!-- Footer --> <!-- Footer --> </div> <!-- Page --> 

Answer 2

Add float: left to the 3 elements.
Don't repeat the properties, combine the selectors with comma.

To stretch the elements you will need to change max-height to height on #footerContainer .

 #content { background-color: black; } .wrapper { width: 60%; height: 100%; margin: 0 auto; } #footer { position: absolute; width: 100%; height: 300px; background-color: black; } #footerContainer { width: 60%; height: 100%; margin: 0 auto; } #footerLeft, #footerCenter, #footerRight { float: left; width: 33%; height: 100%; padding: 0; } #footerLeft { background-color: darkolivegreen; } #footerCenter { background-color: white; } #footerRight { background-color: firebrick; } 

 <div id="Page"> <div id="content" class="wrapper"> </div> <div id="footer"> <div id="footerContainer"> <div id="footerLeft"> <p> Test </p> </div> <div id="footerCenter"> <p> Test </p> </div> <div id="footerRight"> <p> Test </p> </div> </div> <!-- footerContainer --> </div> <!-- Footer --> </div> <!-- Page --> 

Answer 3

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
    width:100%;
    height:100%;
} 
#div1 {
    width:33%;
    display:inline-block;
    float:left;
    height:100%;
}
#div2 {
    width:33%;
    display:inline-block;
    height:100%;
}
#div3 {
    width:33%;
    display:inline-block;
    float:right;
    height:100%;   
}
</style>
</head>
<body>
<div id="container">
<div id="div1"><!--
--><div id="div2"><!--
--><div id="div3">
</div>
</body>
</html>

If the second div isn't perfectly aligned, try setting #container text-align to center. Is very important to use the comments to delete the space between the divs.