JSFiddle - React, Tailwind, and code Playground
HTML
<div id="header">
<div class="head">
<div class="title"><img class="title" src="http://www.engineer.ucla.edu/images/research/TANMS-logo-40px-h.jpg/image_preview"></img></div>
<ul class="link">
<li>
<a><span>新聞</span></a>
</li>
<li>
<a><span>社會</span></a>
</li>
<li>
<a><span>政治</span></a>
</li>
<li>
<a><span>運動</span></a>
</li>
<li>
<a><span>天氣</span></a>
</li>
<li>
<a><span>演藝</span></a>
</li>
<li>
<a><span>小說</span></a>
</li>
<li>
<a><span>學校</span></a>
</li>
</ul>
</div>
</div>
<div class="container"></div>
CSS
* {
margin: 0;
}
html,body {
height: 100%;
min-height: 100%;
width: 100%;
margin: 0;
}
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 40px;
width: 100%;
background-color: red;
}
.head{
width: 100%;
text-align: center;
}
ul{
display: inline;
margin: 0;
padding: 0;
height: 40px;
}
li{
list-style: none;
display: inline;
}
li a {
position: relative;
font-size: 16px;
color: black;
}
.title{
display: inline;
height: 40px;
margin-right: 20px;
}
.container {
position: fixed;
top: 40px;
bottom: 0px;
left: 0;
right: 0;
overflow: auto;
background-color: black;
}