固定位置更改容器宽度
我试图阻止标题元素滚动,所以我给它position: fixed但是根据下面的第二个图像改变它的大小.
我正在使用CSS来维护第一个图像的外观并防止标题滚动.谢谢
html, body {
height: 100%;
padding: 0;
margin: 0;
}
button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
background-color: yellow;
position: fixed;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label>Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
</body>
</html>只是给width:100%头部.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
background-color: yellow;
position: fixed;
width: 100%;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label>Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
</body>
</html>