-1
私はあまりにも流暢なjavascriptではないので、実際には私にとってうまくいくソリューションは見つかりません。私はこれらの2つの要素/ divを整列させようとしています：イメージと "すべて"のdivが等しい高さを持つように、私のフッターが収まるようにしています。あなたはテキストや何かの多くに注意を払う必要はありません。私が必要とするのは、画像の高さを「すべて」divと同じに保つ方法の解決策です。そうすることで、私は "すべて"のdivが静かでないようにしたいので、emフォントの値とパーセントの幅/高さの値を使ってブラウザのサイズに合わせて変更することができます。ですから、基本的には、画像の高さは、 "everything" 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>
であなたのコードを投稿します質問してください – Isaac
あなたが興味がある可能性がありますhttp://brm.io/jquery-match-height/ – Isaac
私はそれを実行すると、まだ動作しますが、コードは、フォーマットエラーを表示し続ける。だから私の書式で質問を投稿することはできません –