<div id="root"></div>* {
padding: 0;
margin: 0;
}
div {
box-sizing: border-box;
font-family: Consolas, "楷体"
}
.container {
width: 100%;
min-height: 100vh;
background-color: #CCC;
}
.header {
width: 100%;
height: 20vh;
background-color: black;
color: white;
overflow: hidden;
}
.header ul {
margin-top: 20px;
margin-right: 10px;
}
.header li {
list-style: none;
padding-left: 5vw;
float: right;
}
.main {
display: flex;
height: 80vh;
}
.content {
width: 100%;
padding-left: 50px;
background-color: #FFF;
padding-top: 20px;
flex: 3;
}
.aside {
padding: 20px 20px;
flex: 1
}class Layout extends React.Component {
render() {
return (
<div className="container">
<div className="header">
<ul>
<li>首页</li>
<li>联系</li>
</ul>
</div>
<div className="main">
<div className="aside">aside</div>
<div className="content">
{this.props.children}
</div>
</div>
</div>
)
}
}
class Content extends React.Component {
render() {
return (
<div>Content</div>
)
}
}
ReactDOM.render(<Layout><Content /></Layout>, document.getElementById("root"));
External CSS
This Pen doesn't use any external CSS resources.