我不太流利的javascript，所以我找不到任何适合我的解决方案。我正在尝试对齐这两个元素/ div：图像和“所有”div具有相同的高度，以便我的页脚适应。没有一个解决方案似乎正在工作。您不需要关注大部分文本或任何内容。我需要的是如何保持图像的高度与“一切”div相同的解决方案。这样做，我希望“一切”div不是sstatic，所以它可以根据浏览器大小使用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>既然你已经标记了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的高度，并将其应用于图像。
但是，现在，您可以轻松获得相同的块/列高度，仅使用CSS方法，并稍微更改您的html结构。但是，这应该可以工作，而无需修改当前的html / css中的任何内容。
首先，看看这个very helpful website，以避免在访问您的网站时让其他人患上眼癌:-)
然后将你的内容包装在一个持有人div中，我给了它类.fullbackground。这个类使用background-size: 50% cover接收背景图像，这意味着它将始终是div的50％，并将调整大小以覆盖整个高度。由于您不再拥有图像的DOM元素，因此您不需要浮动，因此您可以为.everything提供50％的宽度和边距。
这是最小版本中的相同内容：
.fullbackground {
background-image: url(https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg);
background-repeat: no-repeat;
background-size: 50% cover;
}
.everything {
width: 50%;
margin-left: 50%;
background: #f0f0f0;
}<div class="fullbackground">
<div class="everything">
<p>start of content</p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p>end of content</p>
</div>
</div>
<footer>Footer</footer>这是你改编的代码：
html {
margin: 0 0;
}
.fullbackground {
background-image: url(https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg);
background-repeat: no-repeat;
background-size: 50% cover;
}
.everything {
width: 50%;
margin-left: 50%;
}
.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: Verdana;
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 class="fullbackground">
<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>
<p></p><p></p><p></p><p></p><p></p><p></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>
<div class="footer">
<div class="footertop">
<hr id="divider">
</div>
</div>