Question

我有4个块，它有一些内容，所有这些都溢出了文本所以我用

overflow:hidden

它工作正常但是当我们删除这一行时，它清楚地显示文本溢出<div>，因为我使用选取框滚动内容，内容实际上是<div>的一面

我的小提琴：https://jsfiddle.net/qtdod55s/

.leftcolumn {
  background-color:darkgrey;
  height:320px;
  padding:10px;
  margin:10px;
  border-color:black;
  border-style:solid;
  border-width:thin;
  color:white;
  overflow:hidden;
}

.rightcolumn {
  padding:10px;
  height:320px;
  margin:10px;
  border-color:black;
  border-style:solid;
  border-width:thin;
  color:white;
  /*overflow:hidden;*/
  display: inline-block;
}

#tv {
  background-color:black;
  margin:10px;
  height:200px;
  margin-bottom:2px;
}

#weather {
  background-color:darkgrey;
  margin:10px;
  height:120px;
  margin-top:1px;
  border-color:black;
  border-style:solid;
  border-width:thin;
}

#wethericon {
  font-size:100px;
  margin:10px;
  color:yellow;
}

body {
  font-size:18px;
  font-family:'Open Sans', sans-serif;
}

p {
  height:100%;
}


thead {
  background-color:green;
}

tbody {
  background-color:silver;
  color:black;
}

.table-responsive {
  margin-top:5px;
  margin-bottom:5px;
}

.h3, h3 {
  color:red;
  /*font-weight:bold;*/
  margin-bottom:10px;
  margin-top:10px;
}

<body>
<div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-7 leftcolumn">
      <marquee behavior="scroll" direction="up" scrollamount="2">
        <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
    </div>
    <div class="col-md-4 rightcolumn">
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/XnwYWcA5ULk" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
<div class="row">
  <div class="col-md-7 leftcolumn">
  <marquee behavior="scroll" direction="up" scrollamount="2">
    <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  </div>
<div class="col-md-4 rightcolumn">
<marquee behavior="scroll" direction="up" scrollamount="2">
    <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
    to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing


    <h3>Pending Inspection Checklist</h3>
    <div class="table-responsive">
        <table class="table" id="ins-checklist">
            <thead>
                <tr>
                    <th>Team Name</th>
                    <th>Total </th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>


    <h3>Pending Work Completion Report</h3>
    <div class="table-responsive">
        <table class="table" id="work-completion">
            <thead>
                <tr>
                    <th>Team Name</th>
                    <th>Total </th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

</marquee>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/ajaxcalls.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

Answer 1

将以下代码添加到css对我来说很好

marquee {
  height: 100%;
}

内容溢出div

1 个答案: