同じ高さを持つ要素を整列する

Question

私はあまりにも流暢な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>

Answer 1

JavaScriptをタグ付けしておりますので、ここでは1つの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の高さを計算し、それを画像に適用します。

しかし、今日では、あなたが簡単に取得することができます等しいブロック/列の高さ、は少しあなたのHTML構造を変更することでのみ、CSS法使用して、と。しかし、これは現在のhtml/cssで何も変更せずに動作するはずです。

Answer 2

まず第一に、彼らはあなたのウェブサイトを訪問したときに他の人に目のがんを与えないように、このvery helpful websiteをチェックしてください:-)

そして、ホルダーのdivでコンテンツをラップは、私はそれをクラス.fullbackgroundを与えました。このクラスは、background-size: 50% coverの背景画像を受け取ります。つまり、divのwithの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>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</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>