Div auf maximale Höhe bringen

Biker

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

Sempervivum

Das liegt hieran:

justify-content: flex-start;

Wenn Du möchtest, dass die inneren Container den Platz ausfüllen musst Du

justify-content: stretch;

nehmen (oder es weg lassen, weil stretch Default ist).

BTW: Bei dem .small würd ich konsequent sein und die Größe ebenfalls mit flex festlegen:

Code

.small {
    flex: 0 1 40px;
}

Biker

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:

html-seminar.de/woltlab/attachment/2504/

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

Sempervivum

Wenn die rot umrandeten Felder bis an den unteren Rand reichen sollen, geht das am besten, wenn Du auch body ein

Code

body {
    display: flex;
    flex-direction: column,
}

gibst.

Und bei dem div.small ist es daran gescheitert, dass der Selektor für alle Flex-Items spezifischer war und ein höhere Priorität hatte als für div.small.

So funktioniert es bei mir:

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
            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 {
            flex: 1;
            display: flex;
            flex-direction: row;
            /* align-content: stretch; */
            align-items: stretch;
            /* min-height: 100%; */
        }

        .flex-container>div:not(.small) {
            /* order: 0; */
            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;
        }
    </style>
</head>

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

</html>

Alles anzeigen

Biker

Perfekt, tausend Dank.

nextuser

Biker

Dem Body display:flex zu geben ist garnicht nötig. Da würde ich es echt weglassen.

In deinem zuletzt geposteten Code musst du lediglich die 2 Zeile entfernen:

Zitat von Biker

CSS

.container {
    min-height: 100%;
    height:auto !important;
    height:100%;
    margin:auto;
    background-color: #c0c0c0;
}

Das "!important" verhindert hier die "100%" der nachfolgenden height-Angabe.

Wenn du die rote Zeile entfernst, sind die Div's wirklich 100%.

Um jetzt aber nicht volle 100% Höhe & ne Scrollleiste zu haben und die umliegenden Elemente (deine Buttons) zu berücksichtigen,

setze im Container (nicht body, das brauchst du nicht!) flex ein:

CSS

.container {
    min-height: 100%;
    height:100%;
    margin:auto;
    background-color: #c0c0c0;
    display: flex;
    flex-direction: column;
}

Und im flex-container änderst du dann noch "min-height" in "height" um, fertig!

Biker

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

Sempervivum

Die Lösung besteht darin, mit diesen Containern das selbe zu machen, was wir mit body gemacht haben:

CSS

        .flex-container>div {
            align-self: auto;
            border: 1px solid #ff0000;
            height: auto !important;
            display: flex;
            flex-direction: column;
        }

        .left-content {
            flex: 1;
            border: 1px solid #0040ff;
            padding: 5px;
        }

        .right-content {
            flex: 1;
            border: 1px solid #0040ff;
            padding: 5px;
        }

Alles anzeigen

Und einen überflüssigen Container entfernen:

Code

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

Alles anzeigen

Biker

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

Sempervivum

Eine große Hilfe ist immer der HTML-Inspektor des Browsers. Kennst Du den schon?

Biker

Zitat von Sempervivum

Kennst Du den schon?

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

nextuser

Biker

Für die Zukunft wird es für dich auf jeden Fall einfacher & besser durch den Code schauen zu können, wenn du das CSS auslagerst.

Biker

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

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

Sempervivum

Sieht bei mir so aus:

html-seminar.de/woltlab/attachment/2556/

Wenn ich dich jetzt richtig verstehe, willst Du erreichen, dass nicht das ganze Browserfenster scrollbar sein soll sondern nur die Tabelle. Mit linke und rechte Seite meinst Du die beiden schmalen Spalten auf der linken Seite? Bei mir sind die zwar schmal aber gleich breit.

Biker

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

MrMurphy

Um dir wirklich helfen zu können haben wir im Endeffekt zu wenig Informationen von dir.

So wissen wir nicht welche Informationen die Seite wirklich füllen sollen. Deine Blindtexte sind absolut nichtssagend.

Auch wenn es dir weh tun wird: In über 15 Jahre meiner Forumhilfe habe ich wahrscheinlich über 1.000 Fragen zum Tabellenlayout beantwortet. Dabei ist mir noch nicht einmal eine Tabelle mit Tabellendaten untergekommen. Ein Grundproblem dabei: Tabellenelemente sind im HTML nur für Tabellendaten gedacht. Deshalb sagt meine Erfahrung: Auch du verwendest HTML-Tabellen falsch und machst dir damit selbst unnötige Probleme. So wie du es dir vorstellst wird die Seite deshalb nicht funktionieren. Da Tabellen in der Praxis so gut wie nie angebracht sind werden sie in vielen aktuellen Lehrbüchern auch nicht mehr behandelt.

Zu deinem Problem: Die mittlere Spalte hat so weit ich sehe eine Breite von 40px. Die soll sie auch unabhängig von der Fensterbreite beibehalten.

Deshalb musst du die Breite der linken und rechten Spalte berechnen lassen. Um unterschiedliche Einheiten berechnen zu können gibt es in CSS "calc".

Die linke Spalte hat eine Breite von 50% minus 20px. In CSS wird das folgendermaßen berechnet:

Code

flex-basis: calc(50% - 20px);

oder

Code

width: calc(50% - 20px);

Da die Tabelle breiter werden kann sollte die rechte Spalte in ihrer Breite nicht fest bestimmt werden

Code

min-width: calc(50% - 20px);

Oder wie die linke Spalte mit flex-basis und der Möglichkeit über flex-grow die Spaltenbreite über den Browser bestimmen zu lassen.

Biker

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

Sempervivum

Ich hatte zunächst die Vermutung, dass die Tabelle irgend wie die Wirkung der Flex-Anweisungen aushebelt und hatte auch eine entspr. Diskussion bei Stackoverflow gefunden. Daher habe ich probeweise auf Grid umgestellt aber die Probleme waren die selben. Schließlich diese Diskussion, ebenfalls bei Stackoverflow gefunden:

https://stackoverflow.com/questions/2151…flowing-content

Die Antwort dort von geon liefert die Lösung:

Zitat

Basically, to make a flexbox cell scrollable, you have to make all its parents overflow: hidden;, or it will just ignore your overflow settings and make the parent larger instead.

Umgesetzt, et voila, keine Scrollbars am Fenster, die Matrix dagegen scrollbar auf beiden Achsen:

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;
            overflow: hidden;
        }

        .flex-container {
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: stretch;
            overflow: hidden;
        }

        .flex-container>div:not(.small) {
            flex: 1;
            overflow: hidden;
        }

        .flex-container>div.small {
            flex: 0 0 40px;
        }

        .flex-container>div {
            align-self: auto;
            border: 1px solid #80ff00;
            height: auto !important;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .left-content {
            flex: 1;
            border: 1px solid #ff265c;
            padding: 5px;
        }

        .right-content {
            flex: 1;
            border: 1px solid #0040ff;
            padding: 5px;
            overflow: auto;
        }

        .matrix-container {
            display: grid;
            grid-template-columns: repeat(14, 1fr);

        }

        .matrix-container>div {
            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">
                    <div class="matrix-container">
                        <div>Col 1</div>
                        <div>Col 2</div>
                        <div>Col 3</div>
                        <div>Col 4</div>
                        <div>Col 5</div>
                        <div>Col 6</div>
                        <div>Col 7</div>
                        <div>Col 8</div>
                        <div>Col 9</div>
                        <div>Col 10</div>
                        <div>Col 11</div>
                        <div>Col 12</div>
                        <div>Col 13</div>
                        <div>Col 14</div>


                        <div>Col 1</div>
                        <!-- gekürzt -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Alles anzeigen

Jetzt bin ich optimistisch, dass das auch mit einer Tabelle funktionieren wird ...

Sempervivum

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

Jetzt mitmachen!