Question

我在使用div作为边框时遇到了困难。我在它的两侧有一个主要和一个侧边栏div，我试图将边界div的高度设置为主div或侧边栏div的高度，具体取决于哪个更大。

我曾尝试在这里查看类似的高度问题，但我不能让它们起作用。 This is the JsFiddle。

HTML

  <div class="container">
        <div class="sidebar height">
            <div class="sidebar-inner">
                <img class="logo-sidebar" src="img/logo.jpg" />
                <img class="img-sidebar" src="img/pic1.jpg" />
            </div>
        </div>
        <div class="border"></div>
        <div class="main border-inner height">
            <div class="main-inner">
                <img class="img" src="img/pic7.jpg" style="height: 300px;" />

            </div>
        </div>

CSS

.container {
max-width: 926px;
margin: 0 auto;
background-color: #66AB98;
color: #fff;
overflow: hidden;
}

.sidebar {
    float: left;
    width: 26.1%;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    display: block;
}

.sidebar-inner {
    width: 96%;
    margin: 30px 2%;
}

.main {
    float: right;
    width: 73%;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    display: block;
}

.main-inner {
    width: 96%;
    margin: 30px 2%;
}

.border {
    float: left;
    width: .5%;
    background-color: #000;
    margin: 30px 0;
}

p {
    text-indent: 30px;
    font-size: 20px;
    padding: 10px 0 10px 20px;
}

.img {
    width: 500px;
    display: block;
    margin: 10px auto 0 auto;
}


/*---------------------
        Sidebar
---------------------*/

.logo-sidebar {
    width: 90%;
    margin: 0 5%;
    height: 500px;
    display: block;
}

.img-sidebar {
    width: 90%;
    margin: 20px 5% 0 5%;
    display: block;
}

的jQuery

$(document).ready(function() {
  var height - main = $(".main").height();
  var height - sidebar = $(".sidebar").height();

  if (height - main > height - sidebar) {
    $(".border").css("height", height - main);
  } else if (height - main < height - sidebar) {
    $(".border").css("height", height - sidebar);
  }
});

Answer 1

您的变量名称无效。在JS中，变量名称不能包含-，因为它是减法运算符。删除它，您的代码可以正常工作，例如：

var mainHeight = $(".main").height();
var sidebarHeight = $(".sidebar").height();

if (mainHeight > sidebarHeight) {
    $(".border").css("height", mainHeight);
} else if (mainHeight < sidebarHeight) {
    $(".border").css("height", sidebarHeight);
}

另请注意，您可以删除if语句并使用Math.max()来简化代码，如下所示：

var mainHeight = $(".main").height();
var sidebarHeight = $(".sidebar").height();
$(".border").css("height", Math.max(mainHeight, sidebarHeight));

Working example

Answer 2

我无法理解你为什么使用JavaScript来完成这么简单的任务，而只使用CSS就可以轻松完成。

＆＃13;

.container {
  max-width: 926px;
  margin: 0 auto;
  background-color: #66AB98;
  position: relative;
  color: #fff;
  overflow: hidden;
}

.container:before {
  position: absolute;
  background: #000;
  left: 26.25%;
  content: '';
  width: 3px;
  bottom: 28px;
  top: 28px;
}

.sidebar {
  float: left;
  width: 26.1%;
  padding-bottom: 2000px;
  margin-bottom: -2000px;
  display: block;
}

.sidebar-inner {
  width: 96%;
  margin: 30px 2%;
}

.main {
  float: right;
  width: 73%;
}

.main-inner {
  width: 96%;
  margin: 30px 2%;
}

.border {
  float: left;
  width: .5%;
  background-color: #000;
  margin: 30px 0;
}

p {
  text-indent: 30px;
  font-size: 20px;
  padding: 10px 0 10px 20px;
}

.img {
  width: 500px;
  display: block;
  margin: 10px auto 0 auto;
}


/*---------------------
Sidebar
---------------------*/

.logo-sidebar {
  width: 90%;
  margin: 0 5%;
  height: 500px;
  display: block;
}

.img-sidebar {
  width: 90%;
  margin: 20px 5% 0 5%;
  display: block;
}

＆＃13;

<div class="container">
  <div class="sidebar height">
    <div class="sidebar-inner">
      <img class="logo-sidebar" src="img/logo.jpg" />
      <img class="img-sidebar" src="img/pic1.jpg" />
    </div>
  </div>
  <div class="border"></div>
  <div class="main border-inner height">
    <div class="main-inner">
      <img class="img" src="img/pic7.jpg" style="height: 300px;" />

    </div>
  </div>
</div>

＆＃13;

Dynamic Border Div根本没有显示

2 个答案: