Polymer Paper 工具栏忽略 body 页边距

Question

我正在使用 Polymer 1.0 创建一个 paper-toolbar 并在其下方的卡片上进行搜索。计划是工具栏和卡片都是 position:fixed，所以我把它们放在 div 中。我现在遇到的问题是，工具栏向右有点太长，以至于它延伸到身体的边缘。我试过自动保证金，但没用

这是我的代码

<!doctype html>
<html>
  <head>
   <!-- 1. Load webcomponents-lite.min.js for polyfill support. -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
    </script>

    <!-- Polymer Elements -->
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">
    <link rel="import" href="bower_components/paper-card/paper-card.html">
    <link rel="import" href="bower_components/iron-input/iron-input.html">
     <link rel="import" href="bower_components/iron-input/iron-input.html">
     <link rel="import" href="bower_components/paper-styles/paper-styles.html">



    <meta charset="utf-8">
    <title>FreeLV FreifachCommunity</title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery-scrollstop-master/jquery.scrollstop.min.js"></script>
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="css/main.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  </head>


  <body unresolved>
    <div id="HeaderContainer" flex>

      <div id="OuterToolBarContainer">
      <paper-toolbar id="ToolBar">
      <div id="ToolbarContainer">
        <div style="float:left;">
          <paper-icon-button icon="menu"></paper-icon-button>
        </div>
        <div style="float:right;">
          <paper-icon-button icon="more-vert"></paper-icon-button>
        </div>
      </div>
      </paper-toolbar>
      </div>

      <div id="SearchBarContainer">
      <paper-card id="SearchBar" animatedShadow="true" elevation="1">
            <paper-input-container no-label-float id="SearchInput">
              <paper-icon-button prefix icon="search"></paper-icon-button>
                <label>Search...</label>
                <input is="iron-input"></input>
              <paper-icon-button suffix icon="clear"></paper-icon-button>
            </paper-input-container>
      </paper-card>
      </div>

    </div>


    <div id="Content">
    <paper-card>

    </paper-card>
    </div>

  </body>
</html>

CSS

.center {
  text-align: center;
}

body {
  background-image: url(../img/diamond_upholstery.png);
  background-repeat: :repeat;
}

.center {
  margin-left: auto;
  margin-right: auto; 
}

#SearchBarContainer {
  width: 100%;
  height: 7em;
}

#SearchBar {
  margin-top: 1em;
  position: fixed;
}

#SearchInput label{
  font-size: 25px;
}

#SearchInput input{
  font-size: 25px;
}

#ToolbarContainer {
  width: 100%;
}

#HeaderContainer {
  width:100%;
  position: fixed;
}

#Content {
  height: 100em;
  width: 100%;
}

这是我的第一个问题，所以我不能 post 图片.. link 我希望可以 http://i.imgur.com/7enxILQ.jpg

Answer 1

这与 Polymer 或纸质工具栏并没有真正的关系，但它是一般的 CSS problem.The 这里的相关元素是 HeaderContainer 而不是纸质工具栏。当您将元素设置为固定位置时，它会从文档流中取出。这意味着 HeaderContainer 的 100% 宽度是相对于文档而不是 parent（在本例中为 body）解释的。您可以将宽度设置为 inherit 以接管 parent 的宽度。但是，这意味着您首先必须在 body 中设置宽度。

body {
    width: calc(100% - 16px);
}

#HeaderContainer {
    width:inherit;
    position: fixed;
}

我已将 body 的宽度设置为 100% - 16px 以考虑大多数浏览器中典型的 8px 边距。

Polymer Paper 工具栏忽略 body 页边距

Polymer Paper Toolbar ignores body margin

html

css

polymer

centering