底

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>text</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/styles.css">
    <!-- Custom styles for this template go here -->


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

<body>
      <div class="element one">
        <h1>Text</h1>
        <img src="image.png" alt="Front View">
      </div>

      <div class="element two">
        <strong>Living Room</strong> 
        <img class="carousel_image" src="img/LivingRoom.png" alt="living room">

        <strong>Kitchen</strong> 
        <img class="carousel_image" src="img/Kitchen.png" alt="Kitchen">
        <img class="carousel_image" src="img/Kitchen2.png" alt="Kitchen Counter">
      </div>
<hr>
    <!-- bottom details / map -->
    <div class="container bottom">
      <!-- row of columns -->
      <div class="row">
        <div class="col-md-8">
          <h3>Details</h3>
          <div class="col-md-6">
            <strong>text</strong>
            <br>
            <strong>text</strong>
          </div>

          <div class="col-md-6">
            <strong>text</strong> 1984
            <br>
            <strong>text</strong> 0.20
          </div>
          <br><br><br><br>
          <a class="btn btn-default" href="#" role="button">Contact</a>
          <a class="btn btn-default" href="#" role="button">Make an Offer</a>
        </div><!-- /col -->
        <div class="col-md-4">
          <h3>Map</h3>
          <p>insert Google Map here</p>

       </div><!-- /col -->
      </div><!-- /row -->
    </div> <!-- /container -->


    <!-- ============================= -->
    <!-- All your JavaScript comes now -->
    <!-- ============================= -->

    <!-- Bootstrap core JS -->

    <!-- Can place script tags with JavaScript files here -->

  </body>
</html>


div.element{
  width:60%;
  background-color: white;
  height:650px;
  font-family: Arial;
  font-size:12px;
  padding: 10px;
  position: absolute;
  float: left;
}

div.two{
  overflow: scroll;
  margin-left: 60%;
}

.bottom{
  margin-top: 650px;
}

.carousel_image{
  width: 25%;
  height: 25%;
}

Answer 1

您需要做的只是add overflow-y:scroll;到右边的div。

Answer 2

您可以使用简单的CSS和一点Javascript（js评论中的jQuery替代）来归档此内容。

document.getElementsByClassName('thumbnails')[0].style.height = document.getElementsByClassName('photo')[0].clientHeight+'px';

/*
  If you are using jQuery you can also use
  $('.thumbnails').css('height', $('.photo').height());
*/

.row .photo{
  background: #ef4375;
} 

.row .thumbnails {
  background: #97b344;
  overflow-y: scroll;
} 

.row .footer {
  background: #febb39;
  height: 110px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-8 photo">
      <img src="http://placehold.it/500/?text=Principal" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 thumbnails">
      <img src="http://placehold.it/300/?text=Thumb 1" alt="" class="img-responsive">
      <img src="http://placehold.it/300/?text=Thumb 2" alt="" class="img-responsive">
      <img src="http://placehold.it/300/?text=Thumb 3" alt="" class="img-responsive">
      <img src="http://placehold.it/300/?text=Thumb 4" alt="" class="img-responsive">
      <img src="http://placehold.it/300/?text=Thumb 5" alt="" class="img-responsive">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 footer"></div>
  </div>
</div>

CSS分割多个div只有一个滚动

底

2 个答案: