100% 宽度 w/o 父元素答案

【问题标题】：100% width w/o parent element100% 宽度 w/o 父元素
【发布时间】：2017-11-16 22:36:31
【问题描述】：

我有点困惑。我正在构建一个待办事项列表应用程序，并尝试将标题设置为屏幕宽度的 100%。我相信我有正确的元标记，但是将标题设置为 100% 宽度会将元素拉伸到屏幕右侧。是不是我做错了什么？

<!DOCTYPE html>
<html>
 <head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Todo List App</title>

 <link rel="stylesheet" text="text/css" href="style.css">


 </head>
 <body>
     <header>

         <input type="text" placeholder="Enter an activity...">

         <button></button>

     </header>
 </body>
</html>

@charset "UTF-8";

header {
width: 100%;
height: 80px;
position: fixed;
padding: 15px;
top: 0px;
left: 0px;
z-index: 5;
background: #25b99a;
box-shadow:0px 2px 4px rgba(44, 62, 80, 0.15);
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

header input {
width: 100%;
height: 50px;
float: left;
background: rgba(255,255,255,0.2);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-radius: 5px;
border: 0px;
box-shadow: none;
outline: none;
}

【问题讨论】：

尝试将 * { margin: 0; padding: 0; box-sizing: border-box } 添加到您的 CSS。
浮动标题。
浮动一个固定的标题没有意义......
确实如此，每个非绝对定位的元素都必须浮动，除非您想使用不良做法并产生低质量的东西
@mheonyae 标题是固定的，所以浮动不会有任何效果。

标签： css google-chrome width element viewport

【解决方案1】：

您需要包含box-sizing 属性。

Info from MDN

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

header {
  width: 100%;
  height: 80px;
  position: fixed;
  padding: 15px;
  top: 0px;
  left: 0px;
  z-index: 5;
  background: #25b99a;
  box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

header input {
  width: 100%;
  height: 50px;
  float: left;
  background: rgba(255, 255, 255, 0.2);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-radius: 5px;
  border: 0px;
  box-shadow: none;
  outline: none;
}

<header>
  <input type="text" placeholder="Enter an activity...">
  <button></button>
</header>

【讨论】：

谢谢！那工作得很好。也感谢您的链接。这很有意义。