Question

我正在尝试阻止标题元素滚动，所以我给它position: fixed但是根据下面的第二张图片改变了它的大小。
我正在使用CSS来维护第一个图像的外观并防止标题滚动。感谢

＆＃13;

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;
}

＆＃13;

<!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" >&#9776;</button>
    <label>Title of Page</label>
    <button class="menuRight" type="button">&#8942;</button>
</header>


</body>
</html>

＆＃13;

Answer 1

只需将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" >&#9776;</button>
    <label>Title of Page</label>
    <button class="menuRight" type="button">&#8942;</button>
</header>


</body>
</html>

Answer 2

只需将width:100%;添加到header，就像以下解决方案一样：

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" >&#9776;</button>
      <label>Title of Page</label>
      <button class="menuRight" type="button">&#8942;</button>
    </header>
  </body>
</html>

Answer 3

在width:100%;中添加.header。您可以在JSFIDDLE

中查看工作演示

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%;
}

<header>
  <button class="menuLeft" type="button">&#9776;</button>
  <label>Title of Page</label>
  <button class="menuRight" type="button">&#8942;</button>
</header>

固定位置更改容器宽度

3 个答案: