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
  #11 (permalink)  
Alt 11.01.2019, 16:29
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

wahrscheinlich mit padding .Bzw du must den padding den du dazu gibst beim calc im wrapper abziehen.

Aber was du gerade mit den right 2 erklärt hast das war doch in mein code genau so . Verstehe das jetzt gerade alles nicht . aber kucke gleich nochmal genauer weil kann das gerade nicht testen unterwegs

hier steht hmax-height

.navigation {
hmax-height:60px;
}

das h muss auch weg
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 11.01.2019, 22:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Bei mir sieht es so aus!

Angehängte Grafiken
Dateityp: png Zwischenablage01.png (71,0 KB, 38x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 11.01.2019, 23:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Sorry für das Hin und Her mit den Quellcodes ... liegt an den unterschiedlichen Stände.

Ich habe jetzt meine aktuellste Version fertig gemacht, damit wir vom Selben sprechen. Ziel ist, das right2 immer komplett weiß ausgefüllt ist und wenn notig scrollbar wird, ohne das sich irgendetwas schiebt.

HTML-Code:
<!DOCTYPE HTML>


<html>
<head>
<style>

* {
	margin: 0;
	padding: 0;
	font-family: monospace;
	font-size: 14px;
}

body {
	background: lightgreen;
}

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

.navigation {
	flex-basis: auto;
}

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

.headline {
	flex-basis: auto;
}

.maincontent {
	display: flex;
	padding: 5px;
	height: 100vh;
}

.left-container {
	display: flex;
	flex-direction: column;
	flex-basis: auto;
}

.left1 {
	padding: 0px 0px 5px 0px;
	min-width: 220px;
}

.left1 ul>button{
	cursor:pointer;
	border:none;
	background: none;
	text-align:left;
}

.dropdown ul {
    display:flex;
    flex-direction:column;
    margin-top: -1000%;
}

.dropdown > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}
.dropdown > label{
   display:block;
   padding: 5px;
   border: 1px solid black;
   background: white;
  cursor:pointer;

}
.dropdown > label:after {
  content: "|";
  float: right;

}
.dropdown:hover ul{
    margin-top: 0%;
    padding: 5px;
    border: 1px solid black;
    background: white;
}

.left2 {
	flex: 1;
	overflow: auto;
	border: 1px solid black;
	background: white;
	padding-top: 5px;
	margin-top: 5px;

}

.left2> ul{
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 0px 5px 5px 5px;

}

.left2>ul button{
	cursor:pointer;
	border:none;
	background: none;
	text-align:left;
}

.left3 {
	border: 1px solid black;
	margin-top: 5px;
	padding: 5px 5px 0px 5px;
}

.right-container {
	display: flex; 
	flex-direction: column;
	flex: 1;
	padding-left: 5px;
}

.right1 {
	border: 1px solid black;
	padding: 5px;
}

.right2 {
	flex: 1;
	border: 1px solid black;
	margin-top: 5px;
	padding: 5px;
	overflow-x: scroll;
	overflow-y: scroll;
	white-space: nowrap;

}

.right3 {
	border: 1px solid black;
	margin-top: 5px;
	padding: 5px;
}

</style>
</head>
<body>


<div class="flex-container">
	<div class="navigation"> 

<div class="flex-container-navigation">
	<div class="headline">
		HEADLINE
	</div>
</div>

 </div>
	<div class="maincontent"> 



	<aside class="left-container">
		<div class="left1">

<div class="dropdown">
	<input type="checkbox" id="my-dropdown" value="" name="my-checkbox">
	<label for="my-dropdown" data-toggle="dropdown"> ordner1	</label>
	<ul>
		<button type="submit" name="b1" value="b1">ordner1</button>
		<button type="submit" name="b2" value="b2">ordner2</button>
	</ul>
</div>

</div><div class="left2">


	<ul>
		<button type="submit" name="f11" value="f1">file1</button>
		<button type="submit" name="f22" value="f2">file2</button>
	</ul>


</div><div class="left3">
	left3
</div>	
	</aside>
	<aside class="right-container">
		<div class="right1"> file1 </div>
		<div class="right2"> 

 <div style="background: white; border: 0px; margin: -5px; padding: 5px; height: 100%; width: 100%; display: inline-block;">
 Hier ist der Text </div> 
</div>
		<div class="right3"> 

right3
 </div>
	</aside>


 </div>
</div>

</body>
</html>
Mit Zitat antworten
  #14 (permalink)  
Alt 12.01.2019, 22:57
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

bei dein bild sieht es genau so aus wie ei mir . Ok.
Du schreibst das right2 immer den rest einnehmen soll. Macht es doch.Da ist kein leerraum mehr zu sehen. Scrollbalken kommen auch ohne das es sich verschiebt. Da du deinen Schrift ja nicht gebrochen haben willst muss man halt nach rechts scrollen. Oder sollen die vertikalen scrollbalken auch weg ?
Sonst weiß ich nicht was du meinen könntest weil right2 ja den rest ausfüllt was right1 und 3 über läst
Mit Zitat antworten
  #15 (permalink)  
Alt 12.01.2019, 23:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Ich habe Bilder angehangen, die hoffentlich mein Problem besser verdeutlichen können:



Bei Text "der reinpasst" gibt es kein Problem ... außer, dass es schön wäre wenn der Rest auch noch weiß wäre, wie im Bild beschrieben! Wichtig dabei ist, dass der interne Container in right2 die Farbe erhalten soll!



Sobald der Text horizontal zu lang ist, bekommt die ganze Internetseite Scrollbars die nicht gewollt sind!
Angehängte Grafiken
Dateityp: png 1.png (43,0 KB, 35x aufgerufen)
Dateityp: png Zwischenablage02.png (32,4 KB, 35x aufgerufen)
Mit Zitat antworten
  #16 (permalink)  
Alt 13.01.2019, 18:42
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

wenn der tet nicht umgebrochen werden soll , ist ja klar das dann scrollbalken kommen. Du kannst die Scrollbalken ja auch ausblenden, doch dann wird nur der halbe text eingeblendet wenn er zu lang ist. Also mit den scrollbalken musst du schon leben oder die schrift am ende umbrechen wenn der Comtainer am ende ist. Anders wird es nicht gehen wie du es vorhast. Zumindest wüste ich nicht wie.
Bei den anderen muss ich nochmal rein kucken in code gleich. Bin mir aber eigentlich sicher das der cotainer right2 bis unten hin ging . Aber vieleicht vertue ich mich da auch
Mit Zitat antworten
  #17 (permalink)  
Alt 13.01.2019, 18:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Der erste Teil ist mir schon klar, dass wenn der Text nicht umgebrochen wird Scrollbars kommen...so soll es ja auch sein!

Aber schaue dir nochmal Bild 2 an...dort sind 2 vertikale und 2 horizontale Scrollbars...und zwar jeweils 1ner vertikal und horizontal im internen div-Container von right2. Die anderen horizontalen und vertikalen Scrollbars auf der gesamten Seite hingegen sind nicht gewollt.

Ich hoffe ich habe dich richtig und du mich richtig verstanden.
Mit Zitat antworten
  #18 (permalink)  
Alt 15.01.2019, 11:34
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

wenn das am in liegenden div liegt dann weißt du ja was zu tun ist.
Ich hatte de in meinen Beispielen ja raus gelassen weil er für den Text Inhalt ja eigentlich nicht gebraucht wird.
Wenn du ihn aber behalten willst must du bei den div die scrollbar ausschalten.

Wozu brauchst du den div überhaupt da drinne ? Mir sah das so aus als wenn du damit den Abstand herstellen tust damit der eine Text weit unten steht . Das kann man auch mit margin erreichen .
Oder was soll der div da machen ?
Mit Zitat antworten
  #19 (permalink)  
Alt 15.01.2019, 13:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Ich brauche den inneren div nicht unbedingt. Ziel war bloß, das der Text 5px Abstand bekommt und die Box komplett weiß ist, wenn eine Datei geladen wurde - ansonsten soll sie grau bleiben!

Ich greife nochmal deinen letzten Code auf:

https://codepen.io/basti1012/pen/vvzoBN?editors=1100

In dem Code funktioniert das vertikale Scrollen leider auch nicht wie es soll:



Angehängte Grafiken
Dateityp: png 1.png (89,5 KB, 22x aufgerufen)
Dateityp: png 2.png (84,9 KB, 22x aufgerufen)

Geändert von halloICKEbins2 (15.01.2019 um 13:14 Uhr)
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 16.01.2019, 16:06
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

mit den right2 container komme ich ohne feste gröse bzw ohne javascript nicht weiter.
Mein Flexbox wissen verläßt mich gerade.
Da dein Text nicht brechen soll verlängert sich der container so lann wie es sein muss. Eine Feste gröse würde dann die Scrollbalken sichtbar machen .
Ich weiß gerade nicht ob flexbox das irgendwie selber kann aber habe es versucht und es will bei mir nicht.

wie gesagt mit js kein problem ,oder right2 eine feste größe geben dann auch nicht.

Vieleicht weiß wer anders da eine flexbox einstellung die das ohne js macht
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 08:41 Uhr.