html - 如何在不影响表格单元格负边距的情况下使此 div 显示为 :table take the height of 80% of its parent,

Question

JSFiddle here!

在这个SSCCE中，我给了一个display:table属性(property).container ，其中包含 <section>带有 display:table-row 的元素属性(property)，每个section有一个 <img>与 display:table-cell属性，另一个嵌套的 <section>与 display:table-cell属性(property)。

在第一列中，每个表格单元格都包含一个图像，因为我在该列的表格单元格上使用了负边距底部，所以第一列中的所有图像都给出了一个图像的外观/错觉。

我想要的是 .container div (与 display:table; )应该得到一个 height “视口(viewport)的高度(即没有滚动的可见屏幕大小)减去 padding-top 和 padding-bottom 的 200px。”这样第一列中的幻觉就会缩小到那个尺寸。

 @import url(<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,300,600,400' rel='stylesheet' type='text/css'>);
 .section-big {
   padding: 100px 0;
 }
 .section-big .container {
   width: 970px;
   margin: 200px auto;
 }
 .section-big .col {
   width: 47%;
 }
 .section-big .col-left {
   float: left;
   text-align: right;
   padding-right: 25px;
 }
 .section-big .col-right {
   float: left;
   text-align: left;
   padding-left: 25px;
 }
 .section-big .col-left img {
   height: 80%;
   width: 50%;
 }
 h3 {
   color: #6c6969;
   transition: color 0.3s ease 0s;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   font-size: 40px;
 }
 h5 {
   color: #6c6969;
   transition: color 0.3s ease 0s;
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
   font-size: 20px;
 }
 .container {
   display: table;
   margin: 200px auto;
 }
 .container>section {
   display: table-row;
 }
 .col1td,
 .col2td {
   display: table-cell;
   vertical-align: middle;
   padding: 0px 25px;
   /*height: 250px;*/
 }
 .top1 {
   vertical-align: bottom;
   margin-bottom: -64px;
 }
 .top2 {
   vertical-align: top;
   margin-bottom: -62px;
   /*margin-left:45px;*/
 }
 .top3 {
   vertical-align: top;
   margin-bottom: -62px;
   /*margin-left:45px;*/
 }
 .top5 {
   vertical-align: top;
   margin-bottom: -62px;
   /*margin-left:25px;*/
 }
 .section-big {
   height: 100vh;
   padding: 0px;
   margin: 0px;
 }

<div class="section-big">
  <div class="container">


    <section class="section-one">
      <img class="col1td top1" src="http://www.mediafire.com/convkey/0a97/utelxs08krq3fd3zg.jpg" alt="ton ton 1">
      <section class="col2td">
        <h3>HEADING</h3>
        <h5>Paragraph paragraph</h5>
      </section>
    </section>


    <section class="section-two">
      <img class="col1td top2" src="http://www.mediafire.com/convkey/7f55/jsl7mw25qbs3e54zg.jpg" alt="ton ton 2">
      <section class="col2td">
        <h3>HEADING</h3>
        <h5>Paragraph paragraph</h5>
      </section>
    </section>


    <section class="section-three">
      <img class="col1td top3" src="http://www.mediafire.com/convkey/6e7e/jjd597oeexkd5h4zg.jpg" alt="ton ton 3">
      <section class="col2td">
        <h3>HEADING</h3>
        <h5>Paragraph paragraph</h5>
      </section>
    </section>


    <section class="section-four">
      <img class="col1td top5" src="http://www.mediafire.com/convkey/d99d/4g75pbwt1c59971zg.jpg" alt="ton ton 5">
      <section class="col2td">
        <h3>HEADING</h3>
        <h5>Paragraph paragraph</h5>
      </section>
    </section>


  </div>
</div>

我尝试了什么:

1. 我看到了 this example , 并试图给出 height:500px;还有作为height:50%;在给出 body 之后一个height:100%; , 但是那个好像没有什么作用。

2. 我看到了 this SO question并给出了 .section-big A height:100vh所以如果我给.container (这 display:table元素)百分比 height (这将是计算为 .section-big 高度的 X% ).所以我给了.container一个height:80%;并调整了 margin-bottom第一列的表格单元格的 s，结果为 JSFiddle . 但是

   • 首先，section-big确实得到 height:100vh正如我所见经过 在 Google chrome 检查器中将鼠标悬停在它上面，但是 100vh 是 溢出到可见视口(viewport)下方，如下图所示 图。

   • 其次，连body不是从文档的顶部开始的如下图所示。

     

   • 三、.container从其父级流出/溢出 section-big .

     

   JSFiddle 在这里。所以我不知道该怎么做!

Answer 1

试试这个..它可以帮助...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="heading-bar">
        <u>
            <li><a class="js-scroll" href="#section-one">section1</a></li>
            <li><a class="js-scroll" href="#section-two">section2</a></li>
            <li><a class="js-scroll" href="#section-three">section3</a></li>
            <li><a class="js-scroll" href="#section-four">section4</a></li>
        </u>
        <header>
            <h1>heading</h1>
        </header>
    </div>

    <div class="container">
        <section id="section-one">
            <img class="col1td top1" src="http://www.mediafire.com/convkey/0a97/utelxs08krq3fd3zg.jpg" alt="ton ton 1">
            <section class="col2td">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
        </section>

        <section id="section-two">
            <img class="col1td top2" src="http://www.mediafire.com/convkey/7f55/jsl7mw25qbs3e54zg.jpg" alt="ton ton 2">
            <section class="col2td">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
        </section>

        <section id="section-three">
            <img class="col1td top3" src="http://www.mediafire.com/convkey/6e7e/jjd597oeexkd5h4zg.jpg" alt="ton ton 3">
            <section class="col2td">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
        </section>

        <section id="section-four">
             <img class="col1td top5" src="http://www.mediafire.com/convkey/d99d/4g75pbwt1c59971zg.jpg" alt="ton ton 5">
            <section class="col2td">
                <h3>HEADING</h3>
                <h5>Paragraph paragraph</h5>
            </section>
        </section>
    </div>

CSS

 /*@import url(<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,300,600,400' rel='stylesheet' type='text/css'>);*/
    * {
        -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
    }
         .heading-bar {
            height: 200px;
            background-color: white;
            position: fixed;
            z-index: 100;
            width: 100%;
            min-width: 100%;
            top: 0px;
            text-align: center;
         }
         li {
            direction: ltr;
            text-decoration: none;
            margin: 10px;
            display: inline-block;

         }
         li a{

         }
    .container {
           width: 80%;       
           overflow: scroll;


         }
         .section-big .col {
           width: 47%;
         }
         .section-big .col-left {
           float: left;
           text-align: right;
           padding-right: 25px;
         }
         .section-big .col-right {
           float: left;
           text-align: left;
           padding-left: 25px;
         }
         .section-big .col-left img {
           height: 80%;
           width: 50%;
         }
         h3 {
           color: #6c6969;
           transition: color 0.3s ease 0s;
           font-family: 'Open Sans', sans-serif;
           font-weight: 600;
           font-size: 40px;
         }
         h5 {
           color: #6c6969;
           transition: color 0.3s ease 0s;
           font-family: 'Open Sans', sans-serif;
           font-weight: 400;
           font-size: 20px;
         }
         .container {
           display: table;
           margin: 200px auto;
         }
         .container>section {
           display: table-row;
         }
         .col1td,
         .col2td {
           display: table-cell;
           vertical-align: middle;
           padding: 0px 25px;
           /*height: 250px;*/
         }
         .top1 {
           vertical-align: bottom;
           margin-bottom: -64px;
         }
         .top2 {
           vertical-align: top;
           margin-bottom: -62px;
           /*margin-left:45px;*/
         }
         .top3 {
           vertical-align: top;
           margin-bottom: -62px;
           /*margin-left:45px;*/
         }
         .top5 {
           vertical-align: top;
           margin-bottom: -62px;
           /*margin-left:25px;*/
         }
         .section-big {
           height: 100vh;
           padding: 0px;
           margin: 0px;
         }

JavaScript

    $('.js-scroll').click(function(){

        var headerHeight = 200;

        $('body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight
        }, 500);

        return false;
    });