Question

我正在使用Polymer 1.0来创建纸质工具栏并在其下方的卡片上进行搜索。计划是工具栏和卡都是位置：固定所以我把它们放入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%;
}

这是我的第一个问题所以我无法发布图片..我希望链接能够实现 http://i.imgur.com/7enxILQ.jpg

Answer 1

这与Polymer或纸质工具栏无关，但它是一般的CSS问题。这里的相关元素是HeaderContainer，而不是纸质工具栏。当您将元素设置为固定位置时，它将从文档流中取出。这意味着HeaderContainer的100％宽度是相对于文档而不是父文件（在本例中为正文）进行解释的。您可以将宽度设置为inherit，以便接管父级的宽度。但是，这意味着您首先必须在身体中设置宽度。

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

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

我将主体的宽度设置为100％ - 16px，以解决大多数浏览器中典型的8px边距。

聚合物纸工具栏忽略体边距

1 个答案: