zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Scrollbars übersteuern ihren eigenen Div-Container

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.12.2018, 17:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard Scrollbars übersteuern ihren eigenen Div-Container

Abend,

ich habe den nachfolgenden Quelltext:

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style>
* {
	margin: 0;
	padding: 0;
	font-family: monospace;
	font-size: 14px;
}

html{
	height: 100%;
	width: 100%;
	display: table;
}

body {
	display: table-cell;
	vertical-align: middle;
}

.flex-container {
	display: flex;							
	display: -webkit-flex;					
	display: -ms-flexbox;					
	flex-direction: column;					
	width: 100vw;							
	height: 100vh;							
}

.navigation {
	flex-basis: auto;							
}

.maincontent {
	flex-basis: auto;						
	flex-grow: 1;								
	border: 1px solid red;
	padding: 5px;
}

.flex-container-navigation {
	display: flex;				
	display: -webkit-flex;					
	display: -ms-flexbox;					
	flex-direction: row;					
	align-items: center;					
	justify-content: center;					
	padding: 2px 5px 2px 5px; 
}

.headline {
	flex-basis: auto;								
}

.wrapper {
	display: flex;
	flex-direction: row;
}
aside.left-container {
	display:flex;							
	display: -webkit-flex;				
	display: -ms-flexbox;			
	flex-direction: column;					
	flex-basis: auto;			
}

div.left-container.left1 {
	flex-basis: auto;					
	background: #AAAAAA;
}

div.left-container.left2 {
	flex-basis: auto;						
	background: #AAAA88;
}

div.left-container.left3 {
	flex-basis: auto;						
	background: #AA00CC;
}

aside.right-container {
	display:flex;					
	display: -webkit-flex;				
	display: -ms-flexbox;					
	flex-direction: column;					
	flex-basis: auto;					
	flex-grow: 1;
}

div.right-container.right1 {
	flex-basis: auto;							
	background: #AAAA00;
}

div.right-container.right2 {
	flex: 1;							
	background: green;
  	overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
}

div.right-container.right3 {
	flex-basis: auto;							
	background: #AAAAFF;
}
.dropdown {
  position: relative;
  display: inline-block;
  background: white;
}

.dropdown > input[type="checkbox"] {
  position: absolute;
  left: -100vw;		
}

.dropdown > label,
.dropdown > a[role="button"] {
  display: inline-block;
  padding: 5px;
  border: 1px solid black;

}

.dropdown > label:after,
.dropdown > a[role="button"]:after {
  content: "\f0d7";						
  font-family: FontAwesome;				
  display: inline-block;
}

.dropdown > ul {
  position: absolute;
  z-index: 999;
  display: block;
  left: -100vw;
  top: calc(1.5em + 14px);
  border: 1px solid black;
  background: white;
  padding: 5px;
  margin: 0;
  width: calc(100% - 12px);
  cursor: pointer;
}


.dropdown > ul li:hover,
.dropdown > ul li:focus {
  background: #A9BCF5;		
}

.dropdown > input[type="checkbox"]:checked ~ ul,
.dropdown > ul:target {
  left: 0;
}

.list > ul {
	position: relative; 
	left: 0;
	display: inline-block;
	border: 1px solid black;
	padding: 5px;
	background: white;
	width: calc(100% - 12px);
}

.list > ul > li{
	list-style:none;
}

button{
	font-size: 14px;
	font-family: monospace;
	padding: 0px;
	width: 100%;
	left: 0;
	border: 0px;
	background: white;
	text-align: left;
}

button:hover{
	background: lightblue;
}
</style>

</head>
<body>

<FORM target="_self" action="" method="post">

<div class="flex-container">
	<div class="navigation">
		<div class="flex-container-navigation">
			<div class="headline">
				<button type="submit" name="headline" value="" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;">
					<p style="font-size: 30px; font-family: Coolvetica; font-weight: bold; margin: 0px; display: inline;">HEADLINE</p>
				</button>
			</div>
		</div>
	</div>
	<div class="maincontent">
		<div class="wrapper">
			<aside class="left-container">
				<div class="left-container left1"> 
					<div class="dropdown">
					  <input type="checkbox" id="my-dropdown" value="" name="my-checkbox">
					  <label for="my-dropdown" data-toggle="dropdown"> Alle anzeigen </label>
					  <ul>
						<li>
							<button type="submit" name="b1" value="file1" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;">
								<p style="font-size: 14px; margin: 0px; display: inline;">file1</p>
							</button>
						</li>
						<li>
							<button type="submit" name="b1" value="file2" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;">
								<p style="font-size: 14px; margin: 0px; display: inline;">file2</p>
							</button>
						</li>
						<li>
							<button type="submit" name="b1" value="filename länger als normal" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;">
								<p style="font-size: 14px; margin: 0px; display: inline;">filename laenger als normal</p>
							</button>
						</li>
					  </ul>
					</div>				
				</div>
				<div class="left-container left2"> 
					<div class="list">
						<ul>
							<li>
								<button type="submit" name="b2" value="b2">text1</button>
								<button type="submit" name="b2" value="b2">text2</button>
								<button type="submit" name="b2" value="b2">text3</button>
								<button type="submit" name="b2" value="b2">text4</button>
							</li>
						</ul>
					</div>
				</div>
				<div class="left-container left3"> left3 </div>
			</aside>
			<aside class="right-container">
				<div class="right-container right1"> right1</div>
				<div class="right-container right2"> 
        
        
         <div style="height: 100%; width: 100%;"> Das ist eine ziemliche lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange Textzeile, welche nicht umgebrochen werden soll
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>Das ist eine ziemliche lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange Textzeile, welche nicht umgebrochen werden soll
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> </div> 
        
        </div>
				<div class="right-container right3"> right3 </div>
			</aside>
		</div>
	</div>
</div>

</FORM>

</body>
</html>
Mein Problem ist, dass die Scrollbars nicht den Container "right2" scrollbar machen, sondern anscheinend den ganzen body-Bereich der Seite!

Ich wünsche schon jetzt einmal allen ein frohes neues Jahr im Vorraus !!!

Geändert von halloICKEbins2 (31.12.2018 um 17:26 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.01.2019, 21:35
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 141
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

so ganz verstehen tue ich das nicht was du vor hast.Würde das wahrscheinlich dann auch anders machen.
Mit etwas rum fummeln habe ich ertstmal so gemacht
https://codepen.io/basti1012/pen/OrOZYj?editors=1000
doch wie gesagt ,erklär doch mal was du genau vor hast dann kann man das mal anders machen ,bzw dann genuer anpassen
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.01.2019, 23:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Ziel ist, dass alles auf eine Seite passt.
Das bedeutet, dass right2 (und left2) soweit gestreckt wird, dass es die Seite auf 100% auffüllt.
Ist der Inhalt von right2 (und left2) kleiner als 100% dann ohne Scrollbar und wenn der Inhalt größer ist dann mit.
Dabei soll der Text der Zeilen in right2 nicht umgebrochen werden.

Falls noch Unklarheiten sind melde dich einfach nochmal, dann mache ich eine Skizze.
Mit Zitat antworten
  #4 (permalink)  
Alt 02.01.2019, 17:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 141
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

ok das sagt ja schon mal was. was ist den mit left 1 und 3 und right 1 und 3?
Sollen die eine mindeshöhe haben ? Oder sollen sich alle Container den Platz dann teilen wenn container 2 nix drinne ist ,oder zu wennig drinne ist um die ganze seite auszufüllen ?
Mit Zitat antworten
  #5 (permalink)  
Alt 02.01.2019, 21:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

In right1 und right3 steht eine Text 20px, welcher sozusagen für die Größenbeschränkung denkt. Genauso in left1 und left3. Den Rest soll left2 und right2 bekommen.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.01.2019, 13:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Mahlzeit,

hat schon jemand eine brauchbare Lösung oder ist es besser wenn ich eine Skizze mache, was ich meine?
Mit Zitat antworten
  #7 (permalink)  
Alt 10.01.2019, 18:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 141
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

kuck mal ob du damit was anfangen kannst
https://codepen.io/basti1012/pen/vvzoBN?editors=1100

ist auch nicht optimal aber kommt der sache schon mal näher
Mit Zitat antworten
  #8 (permalink)  
Alt 10.01.2019, 22:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Ja leider passt es noch nicht...ich muss mir morgen nochmal in Ruhe anschauen und melde mich dann wieder!
Mit Zitat antworten
  #9 (permalink)  
Alt 11.01.2019, 10:50
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 141
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

was muss den an mein script jetzt noch geändert werden ?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.01.2019, 15:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Leider ja... ich habe es jetzt mal so gestaltet, dass wenn im div-Container(unter right2) nichts steht, dass er den div auf 100%-Höhe und Weite in seinen Grenzen setzt --> So soll er leer aussehen.

Ziel ist jetzt, dass wenn Text dazu kommt, dass sich nichts verschiebt und die Scrollbars vom oben genannten Div-Container mit eingeblendet werden um den Text zu scrollen.

HTML-Code:
<!DOCTYPE html>

<html lang="de">
<head>
  <title>Flexlauout</title>
<style>
* {
	margin: 0;
	padding: 0;
	font-family: monospace;
	font-size: 14px;
}


.flex-container {
	display: flex;							
	display: -webkit-flex;					
	display: -ms-flexbox;					
	flex-direction: column;					
	width: 100vw;							
	height: 100vh;	
}


.maincontent {
	flex-basis: auto;						
	flex-grow: 1;								
	border: 1px solid red;
	padding: 5px;
}

.navigation {
  hmax-height:60px;
	display: flex;				
	display: -webkit-flex;					
	display: -ms-flexbox;								
	align-items: center;					
	justify-content: center;	
	padding: 2px 5px 2px 5px; 
}
#but1{
    font-size: 30px; 
  font-family: Coolvetica; 
  font-weight: bold; 
text-align:center;
   border: 0px; 
  cursor: pointer;
 
}


.wrapper {
	display: flex;
	flex-direction: row;
  min-height:calc(100vh - 60px);
}
aside.left-container {
	display:flex;							
	display: -webkit-flex;				
	display: -ms-flexbox;			
	flex-direction: column;					
  	flex-basis: auto;					
	flex-grow: 1;
}

div.left-container.left1 {	
	background: #AAAAAA;
}

div.left-container.left2 {
 		flex: 2 1 auto;
    align-self: flex-start;		
	background: #AAAA88;
}

div.left-container.left3 {
     justify-content:flex-end;
						
	background: #AA00CC;
}

aside.right-container {
	display:flex;					
	display: -webkit-flex;				
	display: -ms-flexbox;					
	flex-direction: column;					
	flex-basis: auto;					
	flex-grow: 1;
}

div.right-container.right1 {
	border: 1px solid black;
	padding: 5px;
}

div.right-container.right2 {
	flex: 1;
	border: 1px solid black;
	margin-top: 5px;
	padding: 0px;
}

div.right-container.right3 {
	border: 1px solid black;
	margin-top: 5px;
	padding: 5px;
}
.dropdown {
  position: relative;
  display: inline-block;
  background: white;
}

.dropdown > input[type="checkbox"] {
  position: absolute;
  left: -100vw;		
}

.dropdown > label,
.dropdown > a[role="button"] {
  display: inline-block;
  padding: 5px;
  border: 1px solid black;

}

.dropdown > label:after,
.dropdown > a[role="button"]:after {
  content: "\f0d7";						
  font-family: FontAwesome;				
  display: inline-block;
}

.dropdown > ul {
  position: absolute;
  z-index: 999;
  display: block;
  left: -100vw;
  top: calc(1.5em + 14px);
  border: 1px solid black;
  background: white;
  padding: 5px;
  margin: 0;
  width: calc(100% - 12px);
  cursor: pointer;
  list-style:none;
}


.dropdown > ul li:hover,
.dropdown > ul li:focus {
  background: #A9BCF5;		
}

.dropdown > input[type="checkbox"]:checked ~ ul,
.dropdown > ul:target {
  left: 0;
}
 
.left2 >.list{


	border: 1px solid black;
	padding: 5px;
	background: white;

}

.list > ul > li{
	list-style:none;
}

button{
	font-size: 14px;
	font-family: monospace;
	padding: 0px;
	width: 100%;
	left: 0;
	border: 0px;
	background: white;
	text-align: left;
}

button:hover{
	background: lightblue;
}
 #but2,#but3,#but4{
  border: 0px; 
  margin: 0px;
  padding: 0px; 
  background: none; 
  cursor: pointer;
}
 
</style>
</head>
<body>

<form target="_self" action="" method="post">

<div class="flex-container">
	<div class="navigation">
	
	
				<button id="but1" type="submit" name="headline">
					HEADLINE
				</button>
 
		 
	</div>
	<div class="maincontent">
		<div class="wrapper">
			<aside class="left-container">
				<div class="left-container left1"> 
					<div class="dropdown">
					  <input type="checkbox" id="my-dropdown" value="" name="my-checkbox">
					  <label for="my-dropdown" data-toggle="dropdown"> Alle anzeigen </label>
					  <ul>
						<li>
							<button type="submit" name="b1" value="file1" id="but2">
								<p>file1</p>
							</button>
						</li>
						<li>
							<button type="submit" name="b1" value="file2" id="but3">
								<p>file2</p>
							</button>
						</li>
						<li>
							<button type="submit" name="b1" value="filename länger als normal" id="but4">
								<p>filename laenger als normal</p>
							</button>
						</li>
					  </ul>
					</div>				
				</div>
				<div class="left-container left2"> 
					<div class="list">
						<ul>
							<li>
								<button type="submit" name="b2" value="b2">text1</button>
								<button type="submit" name="b2" value="b2">text2</button>
								<button type="submit" name="b2" value="b2">text3</button>
								<button type="submit" name="b2" value="b2">text4</button>
							</li>
						</ul>
					</div>
				</div>
				<div class="left-container left3"> left3 </div>
			</aside>
			<aside class="right-container">
				<div class="right-container right1"> right1</div>
				<div class="right-container right2"> 

          <div style="background: lightgreen; border: 0px; padding: 0px; overflow: auto; height: 100%; width: 100%; white-space: nowrap;">
            
Das ist ein ziemliche lange Zeile mit viel viel viel viel viel viel viel viel viel viel viel viel Text.
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen
<br>mehr Zeilen 
            
          </div>
          
          
          
        </div>
				<div class="right-container right3"> right3 </div>
         </div>
			</aside>
		</div>
	</div>
</div>

</form>

</body>
</html>
Randfrage: Wie bekomme ich den Text im oben genannten Container 5px von allen Rändern weg...das klappte leider jetzt auch nicht mehr!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrundbild via css sprite dynamisch am Div Container anpassen. BallaBalla07 CSS 2 04.06.2013 16:40
Website Konstrukt - Div Container polest (X)HTML 2 27.06.2010 18:55
Header entfernen tripple CSS 17 15.06.2010 16:41
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
div container verschachteln blau CSS 2 05.12.2006 20:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:45 Uhr.