Ausrichten von Elementen, um gleiche Höhe zu haben

Question

Ich bin nicht zu flüssig in Javascript, so dass ich wirklich keine Lösungen finden kann, die für mich arbeiten. Ich versuche, diese zwei Elemente/divs auszurichten: das Bild und das "alles" div, um gleiche Höhen zu haben, so dass meine Fußzeile hineinpasst. Keine der Lösungen scheint zu arbeiten. Sie müssen nicht viel auf den Text oder irgendetwas achten. Alles, was ich brauche, ist eine Lösung, wie man die Höhe des Bildes so wie das "alles" div hält. Dabei möchte ich, dass das "alles" div nicht static ist, also kann es sich je nach Browsergröße mit den em font-Werten und prozentualen width/height-Werten ändern. Also sollte die Bildhöhe im Prinzip gleich der "alles" div-Höhe sein, ohne die Höhe des "alles" div so zu ändern, wie es ohne den hinzugefügten Code wäre. Hier ist der Code:

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

Da Sie haben Javascript markiert, hier ist eine js Lösung:

<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> 

Platzieren Sie diesen Code am unteren Rand der Seite, vor der Schließung von body Markierung. Script Simple berechnet die Höhe von alles Div, und wenden Sie es auf Bild.

jedoch, heute können Sie ganz einfach gleich Blöcke/Spalten Höhen erhalten, nur mit Methoden CSS und durch leicht Ihre HTML-Struktur zu verändern. Dies sollte jedoch funktionieren, ohne etwas in Ihrem aktuellen HTML/CSS zu ändern.

Answer 2

Zu allererst diese very helpful website Besuche zu vermeiden, dass andere Menschen Augenkrebs zu geben, wenn sie Ihre Website besuchen :-)

Dann wird Ihr Inhalt in einem Halter div wickeln, gab ich es die Klasse .fullbackground. Diese Klasse erhält ein Hintergrundbild mit der background-size: 50% cover, was bedeutet, dass es immer 50% der divs mit und wird die Größe ändern wird, um die volle Höhe abzudecken. Da Sie für das Bild kein DOM-Element mehr haben, brauchen Sie kein Floating, also geben Sie .everything eine Breite und einen Rand von 50%.

Hier ist das gleiche in einer Minimalversion:

.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>

Und hier ist Ihr angepasst Code:

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>