quiz
quiz copied to clipboard

Published 20 hours ago •

Reame
Issues

CSS基础测试7

Open zhangxinxu opened this issue 6 years ago • 28 comments

本期题目如下：

请附上对应的CSS代码，注意缩进和代码高亮，可以使用下面语法：

```css
你的代码在这里
```

请提供在线的可访问的demo地址（精力有限，没有demo减1分），如jsbin.com、jsfiddle.net或codepen.io，使用国内的类似工具也可以。

本周六是端午节，小测答疑推迟到下下周周六6月15日上午10:00，和JS小测33期一起答疑，直播地址：https://live.bilibili.com/21193211

首位答题者会额外2积分，同时会被翻牌。

感谢您的参与！

Jun 05 '19 13:06 zhangxinxu

赶个第一在线地址

html,body{
    height: 100%;
    padding: 0;
    margin: 0;
}

.container{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.content{
    flex: 1 0 auto;
}
.footer{
    flex: 0 0 auto;
}

//zxx: 题意理解有偏差，和自己曾经做过类似项目重叠了。
// 1 .content高度跟随内容，不拉伸；
// 2. height:100%在复杂场景下会有意外

Jun 05 '19 13:06 silverWolf818

body {
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
.footer {
  background: red;
}

Jun 05 '19 14:06 sghweb

body{
    margin: 0;
}
.container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    overflow-x:hidden;
    overflow-y:auto;
}
.content{
    background: lightblue;
}
.footer{
    background:lightcoral;
}

Jun 05 '19 14:06 liyongleihf2006

> 在线 Demo <

body {margin: 0;}
main, content, footer {display: block;}

.container {
  display: flex;
  flex-flow: column;
  min-height: 100vh;  /* 不设置固定高度 */
}

.content {flex: 1;}

.footer {
  color: #fff;
  background: #555;
}

Jun 05 '19 14:06 wingmeng

    body {
        margin: 0;
        font-size: 30px;
    }

    .container {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .content {
        background: #ccc;
        height: 300px;
    }

    .footer {
        background: yellow;
    }

Jun 05 '19 14:06 jsweber

🎴Demo

一般思路flex

.container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

如果标签里只有纯文本，可以用 table系列

.container{
  display: table;
  height:100vh;
}
.footer{
  display: table-footer-group;
}

//zxx: 不是纯文本也没有关系吧。如果min-height就完美了，附加奖励积分1分。

.container{
  display: table;
  height:100vh;
}
.content{
  display: table-row;
}
.footer{
  display: table-cell;
  vertical-align:bottom;
}

Jun 05 '19 18:06 Seasonley

Demo

<div class="container">
  <div class="content">
    <div class="ctx">内容块</div>
  </div>
  <div class="footer">底部</div>
</div>

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content {
  flex: 1;
}
.ctx {
  /*内容不满一屏*/
  height: 100px;
  /*内容 超过一屏*/
  /*
  height: calc(100vh + 300px);
  */
  background: yellow;
}

.footer {
  height: 100px;
  background: #ccc;
}

Jun 05 '19 23:06 z-xl-t

html,body{
	margin:0;
	min-height: 100%;
}
html{
	position: relative;
}
.content{
	display: block;
	height: 10vh;
}
.footer{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 40px;
	background: blue;
}

// zxx: 建议relative用在.container上，底部留白。此方法只适用于底部高度固定。

Jun 06 '19 03:06 YuanChaobo

Flex https://codepen.io/crazyboy/pen/zQQroJ

.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.content {
	flex: 1;
}

其他 https://codepen.io/crazyboy/pen/OYYjzR

.container {
	position: relative;
	/*暂时想不到省略这里尺寸的方法*/
	--footerheight: 100px; 
}
.content {
	display: block;
	min-height: calc(100vh - var(--footerheight));
	padding-bottom: var(--footerheight);
}
.footer {
	height: var(--footerheight);
	position: absolute;
	left: 0;
 	right: 0;
	bottom: 0;
}

Jun 06 '19 03:06 NeilChen4698

多放了一个盒子<div class="push"></div>，来抵消margin的负值，在内容少的时候不会覆盖在内容上

body, html {
  height: 100vh;
  margin: 0;
}
.content {
  display: block;
  min-height: 100vh;
  margin: 0 auto -50px;
  background-color: #E9EEF3;
}
.footer, .push {
  min-height: 50px;
}
.footer {
  background-color: lightblue;
}

Jun 06 '19 03:06 smileyby

body,html {
      min-height: 100vh;
      box-sizing: border-box;
      margin: 0;
    }
    .container {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .content, .footer {
      border: 1px solid red;
    }

Jun 06 '19 04:06 JaimeCheng

在线demo flex布局

html, body {
  height: 100%;
  margin: 0;
}
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content {
  width: 100px;
  height: 100px;
  background-color: red;
}
.footer {
  width: 200px;
  height: 100px;
  background-color: green;
}

grid布局

html, body {
  margin: 0;
}
.container {
  min-height: 100vh;
  display: grid;
  align-content: space-between;
}
.content {
  background-color: red;
  height: 100px;
}
.footer {
  background-color: green;
  height: 100px;
}

Jun 06 '19 05:06 brenner8023

在线地址 flex 布局

body { margin: 0; }
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content {
  /* height: 1000px; */
  /* height: 500px; */
  /* height: 1200px; */
  flex-shrink: 0;
  background-color: lightgreen;
}
.footer {
  background-color: lightblue;
}

Jun 06 '19 06:06 ximuli

html,body{
    height: 100%;
    margin: 0;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}
.content {
    flex: 1;
}

如果高度是固定的，下面兼容性更好

html,body{
    height: 100%;
    margin: 0;
}
.container {
    height: 100%;
    overflow: auto;
}
.content {
    box-sizing:border-box;
    min-height: 100%;
    padding-bottom:100px;
}
.footer{
   height:100px;
   margin-top:-100px;
}

Jun 06 '19 06:06 XboxYan

html, body{
  margin: 0;
  height: 100%;
}
.container{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.content{
  flex: 1;
}

Jun 06 '19 07:06 asyncguo

    html,
    body {
        margin: 0;
        padding: 0;
    }

    .container {
        position: relative;
        min-height: 100vh;
        display: block;
        padding-bottom: 30px;
        box-sizing: border-box;
    }

    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        line-height: 30px;
    }

Jun 06 '19 07:06 a694750795

html,body {
    margin: 0;
}
.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Jun 06 '19 07:06 frankyeyq

A PEN BY Forx-Js 适当的加了加pading和background

.container{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-flow:column nowrap;
}
.content{
  flex:1 0;
}
.footer{
  flex:0 0;
  background:#333;
  padding:8px 12px;
  color:#fff
}

Jun 06 '19 08:06 Forx-Js

body,html{
    margin: 0;
    padding: 0;
    height: 100%;
}
.container{
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    min-height: 100%;
    background: #2c94e9;
}
.content{
    display: block;
    background: #dedede;
}
.footer{
    display: block;
    background: #d6c915;
}

<main class="container">
    <content class="content">
        内容
        <div style="height: 400px;"></div>
        <!--<div style="height: 800px;"></div>-->
        内容end
    </content>
    <footer class="footer">
        底部start
        <div style="height: 200px;"></div>
        底部
    </footer>
</main>

Jun 06 '19 08:06 tzmy

/* 自适应 */
.container {
  width: 300px;
  height: 500px;
  margin: 20px;
  overflow-y: scroll;
  background: #ececec;
  display: flex;
  flex-direction: column;
}
.container .footer {
  background: red;
  flex: 0;
}
.container .content {
  background: green;
  flex: 1;
}
/* 固定高度 */
.container1 {
  width: 300px;
  height: 500px;
  margin: 20px;
  overflow-y: scroll;
  background: #ececec;
}

.container1 .content {
  display: block;
  background: green;
  min-height: calc(100% - 100px);
}
.container1 .footer {
  height: 100px;
  background: red;
}

Jun 06 '19 13:06 livetune

    <main class="container">
        <content class="content">
            内容
        </content>
        <footer class="footer">底部</footer>
    </main>

        body{
            margin: 0;
        }
        .container{
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .content{
            flex: 1 0 auto;
        }
        .footer{
            flex: 0 0 auto;
            background-color: skyblue;
        }

Jun 07 '19 02:06 guqianfeng

感觉是水印效果，用flex最快~


.container{
  display:flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: space-between;
}

Jun 07 '19 06:06 CandyQiu

body,
html {
  height: 100%;
}
body {
  margin: 0;
}
.container {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
}
.footer {
  min-height: 30px;
  background: orange;
}

一开始的思路是饿了么弹框那种 margin-top 为负数的 css 效果，但是考虑到需要修改 dom 以及 footer 的高度不为固定，所以该方法无法符合题目要求

body,
html {
  height: 100%;
}
body {
  margin: 0;
}
.container-another {
  overflow: auto;
  height: 100%;
  background-color: #fff;
}
.content-wrapper {
  padding-bottom: 30px;
}
.content {
  display: block;
  min-height: 100%;
}
.footer {
  min-height: 30px;
  text-align: center;
  margin: -30px auto 0;
  background-color: orange;
}

Jun 07 '19 17:06 Despair-lj

 html,body {
        height: 100%;
        margin: 0;
      }
      .container{
          height: 100%;
          display: grid;
          grid-template-rows: 1fr auto;
      }
      .footer {
          background-color: red;
      }

//zxx: grid用得不错，可惜重置了body高度，扣1分

Jun 10 '19 16:06 tao1874

html,
body {
    padding: 0;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    background: pink;
    margin-top: auto;
}

//zxx: 终于看到有深度的回答了，给个满分鼓励下，不过代码没高亮也没缩进，下次注意下。

Jun 11 '19 07:06 ziyingjie

地址：https://codepen.io/mengxiaoixao/pen/mvzwOO

.container{
  min-height:100vh;
  background:red;
  display: grid;
  align-content: space-between;
}
footer{
  background:green;
}

//zxx:  亲，HTML结构写作啦~

Jun 13 '19 13:06 mengxiaoixao

demo:https://codepen.io/wghwebitem/pen/RzWeQJ

                     * {
				padding: 0;
				margin: 0;
			}
			
			.container {
				height: 100vh;
				display: flex;
				flex-direction: column;
			}
			
			p {
				line-height: 30vh;
				text-align: center; 
			}
			
			.footer {
				margin-top: auto;
				flex-shrink: 0;
				padding: 10px;
				background: tomato;
				text-align: center;
				color: #fff;
			}

Jun 14 '19 07:06 WGHwebitem

本期要点：

题意理解要准确：.content不拉伸，不要影响浏览器默认的滚动；
flex布局是相对大家比较容易想到的实现：.container { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh;} 但是IE9不支持。
另外实现：.container{ display: table; min-height:100vh;}.footer{ display: table-footer-group; /* IE8+支持 */} Seasonley的实现。
如果footer高度固定，则实现方法就很多了，例如，绝对定位固定在底部，或者margin负值定位。
grid布局也是可以实现类似效果：.container {display: grid; min-height: 100vh; align-content: space-between;}
满分回答：.container { display: flex; flex-direction: column; min-height: 100vh; }footer { margin-top: auto;}
margin:auto是非常体现CSS理解深度的一个CSS声明。
auto 智能的剩余宽度分配。元素如果没有高宽，尺寸会拉伸（或处在可拉伸上下文中），则此时auto会智能分配剩余空间，实现上下左右或者居中对齐效果。 flex布局下的所有元素就处于一种可尺寸可拉伸的上下文环境，所有，此时，footer设置margin-top: auto是可以顶部对齐的（margin-top自动剩余空间）。

Jun 15 '19 02:06 zhangxinxu