Question

我想使用一个简单的flexbox布局，包括标题，部分（由旁边和部分组成）和粘性页脚。

我的问题是，当我将display:flex应用于身体并且至少有一个孩子时（如果它的标题，部分或页脚没有关系），只有firefox会这样做我需要。

＆＃13;

html, body {
	height:100vh;
	min-height: 100vh;
}

body {
	display: flex;
	flex-direction: column;
}

section {
	flex: 1;
	display: flex;
}
section section {
	display: block;
}

＆＃13;

<body>

	<header>
		<h1>Test Flexbox</h1>
	</header>
  
	<section>
	  <aside>
	  <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
	</aside>
    
	  <section>
		<article>
          <h2>Test</h2>
          <p>Welome to this flex box test snippet.</p>
        </article>
      </section>
    
  </section>

	<footer>
		<p>Here goes the footer, that should always stick to the bottom</p>
	</footer>

</body>

＆＃13;

以上代码适用于Firefox，但不适用于Chrome，Opera，Safari（可能还有更多）。

如果我将display:flex应用于身体之后的<div>，则无处不在。

这是一个错误还是不允许/建议在body-element上使用flexbox？

修改这是使用div的替代版本，适用于所有浏览器：

＆＃13;

html, body {
	height:100vh;
	min-height: 100vh;
}

div {
	display: flex;
	flex-direction: column;
}

section {
	flex: 1;
	display: flex;
}
section section {
	display: block;
}

＆＃13;

<body><div>

	<header>
		<h1>Test Flexbox</h1>
	</header>
  
	<section>
	  <aside>
	  <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
	</aside>
    
	  <section>
		<article>
          <h2>Test</h2>
          <p>Welome to this flex box test snippet.</p>
        </article>
      </section>
    
  </section>

	<footer>
		<p>Here goes the footer, that should always stick to the bottom</p>
	</footer>

</div></body>

＆＃13;

Answer 1

使用视口单元时，无需在所有项目上设置它，在这种情况下Error Message : 2018-01-22 12:30:09,263 INFO [org.kie.server.controller.websocket.client.WebSocketKieServerControllerImpl] (KieServer-ControllerConnect) Kie Server points to non Web Socket controller 'http://localhost:8080/kie-wb/rest/controller', using default REST mechanism 2018-01-22 12:30:09,263 WARN [org.kie.server.common.KeyStoreHelperUtil] (KieServer-ControllerConnect) Unable to load key store. Using password from configuration 2018-01-22 12:30:09,274 WARN [org.kie.server.services.impl.controller.DefaultRestControllerImpl] (KieServer-ControllerConnect) Exception encountered while syncing with controller at http://localhost:8080/kie-wb/rest/controller/server/wildfly-kieserver error Error while sending PUT request to http://localhost:8080/kie-wb/rest/controller/server/wildfly-kieserver response code 405就足够了。另外，放下body它会正常工作。

注1; height: 100vh版本有效但不完整，因为您没有像div那样给height / min-height。

注2;我在某处读到，当使用具有相同值的body / height时，它可能会出错/在某些浏览器中出现问题，这可能就是这种情况。当我找到它的位置时，我会更新我的答案。

Stack snippet

＆＃13;

min-height

＆＃13;

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

section {
  flex: 1;
  display: flex;
}

section section {
  display: block;
}

＆＃13;

更新;支持IE11，它有一个<header> <h1>Test Flexbox</h1> </header> <section> <aside> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> <p>Test Test Test</p> </aside> <section> <article> <h2>Test</h2> <p>Welome to this flex box test snippet.</p> </article> </section> </section> <footer> <p>Here goes the footer, that should always stick to the bottom</p> </footer>错误，这样做：

＆＃13;

min-height

＆＃13;

html {
  display: flex;                   /*  IE bug fix  */
}

body {
  width: 100%;                     /*  flex row item need this to
                                       take full width  */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

section {
  flex-grow: 1;                    /*  IE need this  */
  display: flex;
}

section section {
  display: block;
}

＆＃13;

与flexbox的稠粘的页脚在身体和孩子

1 个答案: