javascript - 对齐元素以具有相同的高度

Question

我的 javascript 不是很流利，所以我真的找不到任何适合我的解决方案。我正在尝试对齐这两个元素/div:图像和“所有”div 具有相同的高度，以便我的页脚适合。似乎没有任何解决方案有效。您无需注意大部分文本或任何内容。我所需要的只是一个关于如何使图像的高度与“所有”div 保持相同的解决方案。在这样做时，我希望“一切”div 不是静态的，因此它可以使用 em 字体值和百分比宽度/高度值根据浏览器大小进行更改。所以，基本上，图像高度应该等于“一切”div 高度而不改变“一切”div 的高度，就像没有添加代码一样。这是代码:

html {
  margin: 0 0;
}

.kewlimage {
  z-index: 1;
  float: left;
  width: 50%;
  height: 45.4em;
}

.everything {
  width: 50%;
  float: left;
}

.navbar a {
  float: left;
  font-family: "Trebuchet MS";
  font-size: 1.55em;
  padding: 0.3475em 0.45em;
  text-decoration: none;
  color: lightslategrey;
  text-align: center;
}

.navbar {
  overflow: hidden;
  background-color: transparent;
  margin: auto 6%;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 1.55em;
  border: none;
  outline: none;
  background-color: transparent;
  color: lightslategrey;
  padding: 0.3475em 0.45em;
  text-align: center;
}

.dropdown-content {
  z-index: 1;
  position: absolute;
  background-color: darkslategrey;
  display: none;
  margin: 0 0.7em;
}

.dropdown-content a {
  display: block;
  text-align: left;
  float: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  text-decoration: underline;
}

.dropdown-content a:hover {
  text-decoration: underline;
}


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

body {
  background-color: lightskyblue;
}

.everything {
  background-image: url("https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Backgrounds-Flat-Design-HD-PIC-WPB004634.jpg");
  width: 50%;
  z-index: 1;
}

h1.title {
  text-align: center;
  color: ghostwhite;
  font-family: "comic sans ms";
  font-size: 3.25em;
  margin: 4% 0% 5% 5%;
}

.title {}

h2.subtitle {
  color: white;
  font-family: tahoma;
  font-size: 2em;
  opacity: 1;
  margin: 2.5% auto;
}

.database-explanation {
  padding: 0.625em 0.9375em;
  background-color: rgba(95, 158, 160, 0.3);
  width: 87.5%;
  text-align: center;
  margin: 9% auto;
}

.text {
  color: white;
  font-family: verdana;
  text-align: left;
  font-size: 1.1em;
  opacity: 1;
  margin: 3.5% auto;
}

.stand-for {
  padding: 0.625em 0.9375em;
  background-color: rgba(95, 158, 160, 0.3);
  width: 87.5%;
  text-align: center;
  margin: 8% auto;
}

.footertop {
  background-color: #333;
  width: 100%;
  float: left;
}

#divider {
  text-align: center;
  margin: 4% auto;
  width: 90%;
  border: 0.1em solid rgba(28, 28, 28, 0.6);
}

<div>
  <img class="kewlimage" src="https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg">
</div>
<div class="everything">
  <div class="navbar">
    <a href="home.html">Home</a>
    <a href="news.html">News</a>
    <a href="join-the-team.html">Join the Team</a>
    <a href="archives.html">Archives</a>
    <div class="dropdown">
      <button class="dropbtn" id="dropbtn">InterTutor</button>
      <div class="dropdown-content">
        <a href="coding.html">Coding</a>
        <a href="science.html">Science</a>
        <a href="math.html">Math</a>
        <a href="history.html">History</a>
        <a href="about.html">About</a>
      </div>
    </div>
  </div>
  <div class="introduction">
    <h1 class="title">Welcome to Databases</h1>
    <div class="database-explanation">
      <h2 class="subtitle" id="sub1">What is Databases?</h2>
      <p class="text" id="text1">Databases is a website meant for students and adults likewise. Our goal is to have a community of students and adults who can help each other while also learning about what ever they choose though the InterTutor program. We also hope to have a sort
        of archives available for easy to access information. We hope that you use these reponsibly, as we will not be responsible for any innapropriate use of these sources. </p>
    </div>
    <div class="stand-for">
      <h2 class="subtitle">What We Stand For</h2>
      <p class="text">In Databases, we want students to learn, and our name stands as a representation of this. D for diligence, A for ambitious, T for technological, A for approachable, B for benevolent, A for attentive, S for studious, E for efficent, and S for scintillating.
        We hope that all of the people that visit this website stand by the same standards. </p>
    </div>
  </div>
</div>
<div class="footer">
  <div class="footertop">
    <hr id="divider">
  </div>
</div>

Answer 1

既然你已经标记了 javascript，这里是一个 js 解决方案:

 <script>

img=document.getElementsByClassName('kewlimage')[0];
every=document.getElementsByClassName('everything')[0];
img.style.height=every.offsetHeight+'px'; 

window.addEventListener('resize', function(event){
 img.style.height=every.offsetHeight+'px';
});  

  </script>

将此代码放在页面底部，在 body 标记结束之前。脚本简单计算所有 div 的高度，并将其应用于图像。

但是，如今，您可以轻松地获得相等的 block /列高度，仅使用 CSS 方法，并通过稍微更改您的 html 结构。但是，这应该可以工作，而无需修改当前 html/css 中的任何内容。