Существует также Plumbum
>>> from plumbum import local
>>> ls = local["ls"]
>>> ls
LocalCommand()
>>> ls()
u'build.py\ndist\ndocs\nLICENSE\nplumbum\nREADME.rst\nsetup.py\ntests\ntodo.txt\n'
>>> notepad = local["c:\\windows\\notepad.exe"]
>>> notepad() # Notepad window pops up
u'' # Notepad window is closed by user, command returns
Возможный ответ с помощью flexbox:
div {
height: 20px;
}
#top {
background-color: pink;
}
#left {
background-color: #0000ff;
}
#center {
background-color: #6666ff;
}
#right {
background-color: #9999ff;
}
#bottom {
background-color: pink;
}
.flexbox {
display: flex;
}
.item--flex-1 {
flex: 1;
}
<div id="top"></div>
<div class="flexbox">
<div id="left" class="item--flex-1"></div>
<div id="center" class="item--flex-1"></div>
<div id="right" class="item--flex-1"></div>
</div>
<div id="bottom"></div>
Упростите, упростите, упростите. Кроме того, в наши дни старайтесь не использовать плавающие элементы для макета, если только вам это не нужно, и вы не понимаете, что происходит с элементом, когда вы это делаете.
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* For flex-grow for .content to stretch page height. */
margin: 0;
}
.content {
display: flex;
flex-grow: 1;
}
main {
flex-grow: 1;
}
/* Demo styles */
header,
footer {
background-color: whitesmoke;
}
aside {
background-color: cornsilk;
}
main {
background-color: aliceblue;
}
<header>Header</header>
<div class="content">
<aside class="left-sidebar">
Left Aside
</aside>
<main>
Main
</main>
<aside class="right-sidebar">
Right Aside
</aside>
</div>
<footer>Footer</footer>
Сетка была бы хорошим способом сделать это тоже, потому что она позволяет всем элементам быть братьями и сестрами внутри одного и того же родителя.
body {
display: grid;
grid-template-areas: 'header header header'
'left main right'
'footer footer footer';
grid-template-rows: max-content 1fr max-content; /* Change this to set the column widths */
grid-template-columns: max-content 1fr max-content;
min-height: 100vh; /* To stretch page height */
margin: 0;
}
body > * {
padding: 1em;
outline: 1px solid red;
}
header {
grid-area: header;
}
.left-sidebar {
grid-area: left;
}
.right-sidebar {
grid-area: right;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
<header>Header</header>
<aside class="left-sidebar">
Left Aside
</aside>
<main>
Main
</main>
<aside class="right-sidebar">
Right Aside
</aside>
<footer>Footer</footer>