Wie stelle ich die div height so ein, das die innere HTML-Seite komplett angezeig wird?

Ich möchte eine Seite erstellen, wo ich alle Seiten, welche ich im Informatik-Unterricht erstellt habe in einen Div-Container lade. Jedoch wenn ich das tue, füllt bei mir die innere HTML-Seite nicht den kompletten Container sondern bekommt eine eigene Scrollbar. Ich hätte aber gerne , dass sich die komplette innere HTML-Seite auf den Container angezeigt wird und stattdessen mit der Scrollbar der Haupt Seite scrolle. Wie bekomme ich das hin?

Haupt-Seite

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../CSS/main.css" type="text/css" rel="stylesheet">
    <title>Informatik</title>
</head>
<body id="index_body">
<div id="main_container">
    <div id="header">
        <h1 align="middle">Informatikunterricht</h1>
    </div>
    <div id="menu_container">
        <ol style="line-height: 200%;">
            <li class="menu_button"><a href="#" onclick="loadPage('Kommentar')" >Seite</a></li>          
        </ol>
    </div>
    <div id="page_container">
        page
    </div>
</div>
</body>
<script>
    function loadPage(path){
        const object = '<object type="text/html" data="' + `${path}` + '.html" id="content"></object>';
        document.getElementById("page_container").innerHTML=object;
    }
</script>
</html>


Css-Datei (gilt auch für die innere HTML-Seite)

#main_container{

display:grid;

grid-template-columns: 20% 80%;

grid-template-rows: 10%, auto;

width:auto;

background-color: #121212;

}

#header{

grid-column: 1 / span 2;

grid-row: 1;

height: fit-content;

background-color: #181818;

}

#page_container{

display: flex;

flex-direction: column;

/* background-color: #282828; */

background-color: blue;

grid-row: 2;

min-height: 100%;

}

#menu_container{

background-color: #181818;

grid-row: 2;

}

#content{

flex: 1;

width: 100%;

}

span{

background-color: gray;

border: 1px solid white;

padding: 0px 2px;

border-radius: 5px;

}

body{

color: #FFFFFF;

font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

font-size: 15pt;

}

#index_body{

background-color: #121212;

}

/* body:not(#index_body){

overflow:hidden;

} */

1 Antwort

1337j4x

27.10.2023, 00:10

Versuch mal das

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 100%;
}

div#GanzeSeite {
position: relative;
margin: 0 auto;
width: 700px;
min-height: 100%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 100%; /* IE */
background-color:black;
--->
</style>
  <title></title>
  </head>
  <body>
   <div id="GanzeSeite"> &nbsp; </div>
  </body>
</html>

Twitchers04

Beitragsersteller

29.10.2023, 00:10

Also wenn ich deinen Quellcode 1 zu 1 übernehme funktioniert es leider immer noch nicht

1337j4x

11.11.2023, 19:36

@Twitchers04

Hast du den Code als einzelne Seite getestet?

Twitchers04

Beitragsersteller

27.10.2023, 00:25

Soll ich dann in den Div#Ganze Seite dann alle meine divs reinpacken oder ersetzt es bei mir den Div#main_container?

Ähnliche Beiträge

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

CSS Wie kriege ich diese grid Box nach Rechts?

Mein Elterncontainer hat display: grid und der dritte Container hat:

    .Container:nth-of-type(3) {
        grid-row: -3/-1;
    }

Damit ist er links, auf der falschen Seite.

Gewünschtes Layout:

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Tkinter Fehler?

Ich programmiere mit Tkinter einen Taschenrechner zusammen mit einem Video.

Es kommt die ganze zeit die Fehlermeldung "nontype has no attribute get".

Mein code:

import tkinter as tk

calculator = ()

root = tk.Tk()
root.geometry("75x100")
root.title("Taschenrechner")
root.resizable(True, True)

entry_ziv = tk.Entry(root).grid(row=0, column=0)

def add_ziv(ziv):
    entry_ziv.insert(0, ziv)

def show_result():
    result = eval(entry_ziv.get())
    entry.delete(0, tk.END)
    entry_ziv.insert(0, str(result))

button_seven = tk.Button(root, text="7", command=lambda: add_ziv("7")).grid(row=1, column=0)
button_eight = tk.Button(root, text="8",command=lambda: add_ziv("8")).grid(row=1, column=1)
button_nine = tk.Button(root, text="9", command=lambda: add_ziv("9")).grid(row=1, column=2)
button_div = tk.Button(root, text=":", command=lambda: add_ziv(":")).grid(row=1, column=3)

button_four = tk.Button(root, text="4", command=lambda: add_ziv("4").grid(row=2, column=0))
button_five = tk.Button(root, text="5", command=lambda: add_ziv("5")).grid(row=2, column=1)
button_six = tk.Button(root, text="6", command=lambda: add_ziv("6")).grid(row=2, column=2)
button_multiply = tk.Button(root, text="x", command=lambda: add_ziv("x")).grid(row=2, column=3)

tton_one = tk.Button(root, text="1", command=lambda: add_ziv("1")).grid(row=3, column=0)
button_two = tk.Button(root, text="2", command=lambda: add_ziv("2")).grid(row=3, column=1)
button_tree = tk.Button(root, text="3", command=lambda: add_ziv("3")).grid(row=3, column=2)
button_minus = tk.Button(root, text="-", command=lambda: add_ziv("-")).grid(row=3, column=3)

button_execute = tk.Button(root, text="=", command=show_result()).grid(row=4, column=2)
button_plus = tk.Button(root, text="+", command=lambda: add_ziv("+")).grid(row=4, column=3)

root.mainloop()

...zum Beitrag

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zum Beitrag

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

...zum Beitrag

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zum Beitrag

HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

-------------------------------------------------------------------------------------

HTML CODE:

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

----------------------------------------------------------------------------------------------------

CSS CODE:

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

----------------------------------------------------------------------------

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

...zum Beitrag

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zum Beitrag

HTML Seite verschiebt bei Verkleinerung?

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

...zum Beitrag

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

Wieso wird mein Column nach einer Row nicht in Flutter angezeigt?

Hallo, ich habe ein Programm das so aussehen soll:

Ich habe diesen Code:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            children: <Widget>[
              Container(
                width: 100,
                color: Colors.red,
              ),

              Column(
                children: <Widget>[
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.yellow,
                  ),
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  ),
              Container(
                width: 100,
                color: Colors.yellowAccent,
                  ),
                ],
              ),
            ],
          )
          ),
        ),
      );
  }
}

Der letzte Container (yellowAccent) wird nicht angezeigt auf dem Emulator. Kann mir bitte jemand helfen?

Mfg Elias Brüggen

...zum Beitrag

Wie kann ich button Ausrichten (Python)?

Ich wollte in folgendem Code den Button abstand entfernen, damit diese nicht so eine große lücke haben.

from tkinter import *
import random
from tkinter import messagebox

root = Tk()
root.title('Lock')
root.geometry('400x780')

one_btn = Button(root, text='1', command=one_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
two_btn = Button(root, text='2', command=two_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
three_btn = Button(root, text='3', command=three_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
four_btn = Button(root, text='4', command=four_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
five_btn = Button(root, text='5', command=five_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
six_btn = Button(root, text='6', command=six_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
seven_btn = Button(root, text='7', command=seven_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
eight_btn = Button(root, text='8', command=eight_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
nine_btn = Button(root, text='9', command=nine_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
plus_btn = Button(root, text='+', command=plus_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
minus_btn = Button(root, text='-', command=minus_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
mult_btn = Button(root, text='*', command=mult_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=10)
div_btn = Button(root, text='/', command=div_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=30)
square_btn = Button(root, text='^', command=square_btn_press, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c', height='3', width=30)



one_btn.grid(row=0, column=0, pady=0, padx=0)
two_btn.grid(row=0, column=1, pady=0, padx=0)
three_btn.grid(row=0, column=2, pady=0, padx=0)
four_btn.grid(row=1, column=0, pady=0, padx=0)
five_btn.grid(row=1, column=1, pady=0, padx=0)
six_btn.grid(row=1, column=2, pady=0, padx=0)
seven_btn.grid(row=2, column=0, pady=0, padx=0)
eight_btn.grid(row=2, column=1, pady=0, padx=0)
nine_btn.grid(row=2, column=2, pady=0, padx=0)
plus_btn.grid(row=0, column=3, pady=0, padx=0)
minus_btn.grid(row=1, column=3, pady=0, padx=0)
mult_btn.grid(row=2, column=3, pady=0, padx=0)
div_btn.grid(row=3, column=1, pady=0, padx=0)
square_btn.grid(row=3, column=2, pady=0, padx=0)


root.call('wm', 'attributes', '.', '-topmost', '1')
root.mainloop()

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen