Beiträge von Biker

Biker · 24. Juli 2020

Sempervivum schrieb:

... soeben umgestellt und funktioniert mit einer Tabelle genauso so gut.

Stimmt.

Tausend Dank, ich glaube, da hätte ich mir noch ewig die Zähne dran ausgebissen.

Gruß

Biker

Biker · 23. Juli 2020

Hallo MrMurphy

Danke für die Antwort.

Diesmal sind das wirklich tabellarische Daten. Auf der linken Seite kommt ein Bild und darunter ein Beschreibungstext. Auf der rechten Seite kommen dann technische Daten aus einer Datenbank, die in einer Tabelle angezeigt werden müssen. Hier passt das also mit der Tabelle, ansonsten gebe ich dir recht, Tabellen werden häufig missbraucht. Da in meiner Tabelle recht viele Daten vorkommen können, möchte ich also nur die Tabelle mit Scrollbars versehen, eine mobile Ansicht wird hier auch zu 100% nicht gebraucht.

Habe heute leider keine Zeit mehr, ich kann erst morgen deine Hinweise testen.

Danke und Gruß

Biker

Biker · 23. Juli 2020

Danke für die schnelle Antwort.

Die linke Seite mit den Texten abc und die rechte Seite mit der Tabelle sollen beide gleich breit sein. Die mittlere Spalte mit den Buttons hat eine feste Breite.

Wenn die Tabelle höher oder breiter wird, als das div, in dem sie liegt, muss man die ganze Seite scrollen bzw. die linke Seite wird schmaler. Der von dir in Posting #8 geschriebenen HTML-Code funktioniert soweit perfekt, nur wenn ich auf der rechten Seite eine große Tabelle einbauen, geht das Layout kaputt.

Ich möchte erreichen, dass man die Tabelle scrollen kann, oder das div, in dem die Tabelle liegt.

Hoffentlich habe ich das jetzt verständlich genug erklärt, weiß nicht, wie ich das besser beschreiben soll.

Danke und Gruß

Biker

Biker · 23. Juli 2020

Hallo zusammmen,

habe leider doch noch ein Problem. Da es sich um den gleichen HTML-Code handelt, schreibe ich in diesem Thread weiter.

Zu meinem Problem:

Der aktuelle HTML-Code sieht (angepasst für das Forum) so aus:

HTML

<!DOCTYPE html>
<html>
<head>
<title>Style</title>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
background-color: #ffffff;
}
button {
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
font-size: 12px;
margin: 2px;
cursor: pointer;
background-color: #00a3d9;
}
.app {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
}
.flex-container {
flex: 1;
display: flex;
flex-direction: row;
align-items: stretch;
}
.flex-container > div:not(.small) {
flex: 1 1 auto;
}
.flex-container > div.small {
flex: 0 1 40px;
}
.flex-container>div {
align-self: auto;
border: 1px solid #80ff00;
height: auto !important;
display: flex;
flex-direction: column;
}
.left-content {
flex: 1;
border: 1px solid #ff265c;
padding: 5px;
}
.right-content {
flex: 1;
border: 1px solid #0040ff;
padding: 5px;
overflow: always;
max-width: 100%;
max-height: 100%;
}
td {
padding: 30px;
}
</style>
</head>
<body>
<div class="app">
<div>
<button class="button">btn</button>
<button class="button">btn</button>
<span>Text</span>
<button class="button">btn</button>
<button class="button">btn</button>
<button class="button">btn</button>
</div>
<div class="flex-container">
<div>
<div>
<button class="button">btn</button>
<button class="button">btn</button>
<button class="button">btn</button>
<button class="button">btn</button>
<button class="button">btn</button>
</div>
<div class="left-content">
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
</div>
</div>
<div class="small">
<button class="button">btn</button>
<button class="button">btn</button>
<button class="button">btn</button>
<button class="button">btn</button>
<button class="button">btn</button>
</div>
<div>
<div>
<button class="button">btn</button>
<button class="button">btn</button>
<button class="button">btn</button>
<button class="button">btn</button>
<button class="button">btn</button>
</div>
<div class="right-content">
<table>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 10</td>
<td>Col 11</td>
<td>Col 12</td>
<td>Col 13</td>
<td>Col 14</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

Alles anzeigen

Die Tabelle zerreißt leider das Layout, die linke und rechte Seite haben jetzt unterschiedliche Breiten und die Tabelle erhöht die Höhe vom Body.

Es sollen immer die linke und die rechte Seite gleich breit sein und die Tabelle soll horizontal und vertikal scrollbar sein. Alle Versuche mit z.B. overflow: auto mit width: 100% funktionieren nicht. Ich wäre sehr dankbar, wenn mir nochmal jemand auf die Sprünge helfen könnte.

Danke und Gruß

Biker

Biker · 6. Juli 2020

nextuser

Den CSS-Code habe ich bei mir ausgelagert, habe den nur für das Forum in den HTML-Code kopiert, um alles zusammen zu haben.

Biker · 3. Juli 2020

Sempervivum schrieb:

Kennst Du den schon?

Ein wenig, aber auch da muss ich mich wohl noch einarbeiten.

Biker · 3. Juli 2020

Sempervivum

Ich danke dir, das ist jetzt perfekt. Das ganze Handling mit flexbox bereitet mit immer noch leichte Probleme, aber ich arbeite dran.

Nochmals danke

Biker

Biker · 3. Juli 2020

Hallo und danke auch dir nextuser

Ich dachte, ich hätte es verstanden, aber ich habe gestern Abend noch eine ganze Zeit gebastelt, ich bekomme das irgendwie nicht hin. Ich möchte jetzt die bei Content-div's (mit blauem Rahmen) ebenfalls bis an den unteren Rand. Alle meine Versuche haben das nur verschlimmbessert, deshalb wäre ich dabkbar, wenn mir noch mal jemand auf die Sprünge helfen könnte.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Style</title>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
background-color: #c0c0c0;
}
button {
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
font-size: 12px;
margin: 2px;
cursor: pointer;
}
.button1 {
background-color: #4CAF50;
}
.button2 {
background-color: #00a3d9;
}
.button3 {
background-color: #00629c;
}
.button4 {
background-color: #698c00;
}
.flex-container {
flex: 1;
display: flex;
flex-direction: row;
align-items: stretch;
}
.flex-container > div:not(.small) {
flex: 1 1 auto;
}
.flex-container > div.small {
flex: 0 1 40px;
}
.flex-container > div {
align-self: auto;
border: 1px solid #ff0000;
height: auto !important;
}
.left-content {
border: 1px solid #0040ff;
padding: 5px;
}
.right-content {
border: 1px solid #0040ff;
padding: 5px;
}
</style>
</head>
<body>
<div>
<button class="button1">btn</button>
<button class="button1">btn</button>
<button class="button1">btn</button>
<button class="button1">btn</button>
<button class="button1">btn</button>
</div>
<div class="flex-container">
<div>
<div>
<div>
<button class="button2">btn</button>
<button class="button2">btn</button>
<button class="button2">btn</button>
<button class="button2">btn</button>
<button class="button2">btn</button>
</div >
<div class="left-content">
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
</div>
</div>
</div>
<div class="small">
<button class="button3">btn</button>
<button class="button3">btn</button>
<button class="button3">btn</button>
<button class="button3">btn</button>
<button class="button3">btn</button>
</div>
<div>
<div>
<button class="button4">btn</button>
<button class="button4">btn</button>
<button class="button4">btn</button>
<button class="button4">btn</button>
<button class="button4">btn</button>
</div>
<div class="right-content">
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
</div>
</div>
</div>
</body>
</html>

Alles anzeigen

Biker · 2. Juli 2020

Perfekt, tausend Dank.

Biker · 2. Juli 2020

Wow, danke für die superschnelle Antwort, aber das passt leider nicht, wie ich es gerne hätte. Die rot umrandeten Felder sollen bis an den unteren Rand reichen:

pasted-from-clipboard.png

und durch das ändern von small ist die maximale Breite leider auch verloren gegangen.

Wenn noch bitte jemand draufschauen könnte.

HTML

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
padding:0;
margin: 0;
height:100%;
}
.container {
min-height: 100%;
height:auto !important;
height:100%;
margin:auto;
background-color: #c0c0c0;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 2px;
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
.flex-container {
display: flex;
flex-direction: row;
align-content: stretch;
align-items: stretch;
min-height:100%;
}
.flex-container > div {
order: 0;
flex: 1 1 auto;
align-self: auto;
border: 1px solid #ff0000;
height:auto !important;
}
.small {
flex: 0 1 40px;
}
</style>
</head>
<body>
<div class="container">
<div>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</div>
<div class="flex-container">
<div><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p></div>
<div class="small">2</div>
<div>3</div>
</div>
</div>
</body>
</html>

Alles anzeigen

Danke

Biker

Biker · 2. Juli 2020

Hallo zusammen,

ich versuche bisher vergeblich, div auf die maximale noch verfügbare Höhe zu bringen. Ich habe hier einen einfachen HTML-Code als Beispiel

HTML

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
padding:0;
margin: 0;
height:100%;
}
.container {
min-height: 100%;
height:auto !important;
height:100%;
margin:auto;
background-color: #c0c0c0;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 2px;
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
min-height:100%;
}
.flex-container > div {
order: 0;
flex: 1 1 auto;
align-self: auto;
border: 1px solid #ff0000;
height:auto !important;
}
.small {
max-width:40px;
}
</style>
</head>
<body>
<div class="container">
<div>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</div>
<div class="flex-container">
<div><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p></div>
<div class="small">2</div>
<div>3</div>
</div>
</div>
</body>
</html>

Alles anzeigen

Die drei div's im flex-container sollen bis an den unteren Rand des Browsers gehen, unabhängig vom Inhalt. Kann mir bitte jemand sagen, was ich da falsch mache?

Danke im voraus

Biker

Beiträge von Biker

Div auf maximale Höhe bringen

Div auf maximale Höhe bringen

Div auf maximale Höhe bringen

Div auf maximale Höhe bringen

Div auf maximale Höhe bringen

Div auf maximale Höhe bringen

Div auf maximale Höhe bringen

Div auf maximale Höhe bringen

Div auf maximale Höhe bringen

Div auf maximale Höhe bringen

Div auf maximale Höhe bringen