Jak ustawić jednakową wysokość w trzech diw-ach

0

jest taki kod, przeszukałem forum, googla, ale znajduję tylko szczątkowe odpowiedzi.


<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">

<style>
  * {
    box-sizing: border-box;
  }

  body, table, tbody, tr, td, p, ul, ol, li {
    font-family : Tahoma, "DejaVu Sans";
    font-size : 12px;
    margin: 0;
    padding: 0;
  }

  .column {
    float: left;
    padding: 0px;
    margin: 0px;
  }

  .column.side {
    width: 18%;
    border-left: 1px solid blue;
    border-right: 1px solid blue;
    
    height: auto;
  }

  .column.middle {
    width: 64%;
    border-left: 1px solid red;
    border-right: 1px solid red;
    
    height: auto;
  }

  .row {
    margin-top: 0%;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 0%;
    
    border-top: 3px solid black;
  }

  .row:after {
    content: "";
    display: table;
    clear: both;
  }
<!--
 </style>
</head>
<body>

<div class="row">
  <div class="column side">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
    </p>
  </div>

  <div class="column middle">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec
       neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt
       eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec
       neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt
       eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </p>
  </div>

  <div class="column side">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
</div>

</body>
</html>
-->

nie znam JavaScript, a potrzeba jest funkcja która ustawi jednakową wysokość we wszystkich trzech <div-ach>, ale bez użycia frameworków, w czystym JS.

2

Do tego nie jest potrzebny js albo ustawiasz ja sztywnie za pomoca width/max-width albo uzyj flexbox-a w 2021 nie moge patrzec na float-owane elementy juz nawet zapomnialem jak to sie robi :D

1

Dlaczego nie możesz ustawić wysokości po prostu w CSS?

0

@marcio: konkretnie jest mi potrzebne ustawienie co 1 piksela, framework-ów nie chcę, tylko czysty js

@angry bread: bo się nie da, a o zgodności z różnymi przeglądarkami mowy nie ma.

konkretnie to ma ta funkcja wyrównać pozostałe 2 div-y do najwyższego.

2

No okej, tutaj masz skrypt, który Ci wyrówna wszystkie divy względem najwyższego (niekoniecznie pierwszego):

const divs = [...document.querySelectorAll('div.column')];

const divsHeight = divs.map(div => parseInt(window.getComputedStyle(div).getPropertyValue('height').split('px')[0]));
const highestDiv = Math.max(...divsHeight);

divs.forEach(div => div.style.height = highestDiv + 'px');
0

https://www.w3schools.com/howto/howto_css_equal_height.asp

@marcio: konkretnie jest mi potrzebne ustawienie co 1 piksela, framework-ów nie chcę, tylko czysty js

Nie rozumiem po co w ogole mowimy o jakimkolwiek fw o js nie wspominajac

bo się nie da, a o zgodności z różnymi przeglądarkami mowy nie ma.

Ale ze niby czego sie nie da? nie idzie ustawic fixed height przez css przez niezgodnosc miedzy roznymi przegladarkami ? cos dziwnie mi sie to widzi

0

@angry bread: Jak to ubrać i wstawić na stronę powyżej, gdzie w sekcję head, czy jak ? - nie znam JavaScript, i ne bardzo rozumie.

0

@angry bread: Ale już w operze to nie działa, jest problem z poprawnym wyświetlaniem znacznika p

0

@SQra1975: wklej tę linijkę na samym dole tagu body: <script>TUTAJ WKLEJ KOD</script>

1

@SQra1975: Wystarczy, że do klasy row dorzucisz display: flex i każda z kolumn będzie miała taką samą wysokość :)

0

@darkonepl: tego już sam się domyśliłem, teraz responsywność działa w operze, ale już w chrome i mozilli - nie, uff nie mam już dziś na to siły :)

0

aktualnie to wygląda tak:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

  html {
    box-sizing: content-box;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  body, p, table, tbody, tr, td, ul, ol, li {
    background: #c0c0c0;
    font-family : Tahoma, "DejaVu Sans";
    font-size : 12px;
    margin: 0;
    padding: 0;
  }
  
  .column {
    background-color: #e0e0e0;
    float: left;
    padding: 0px;
    margin: 0px;
    height: auto;
  }
  
  .column p {
    background-color: #e0e0e0;
    float: left;
    padding: 0px;
    margin: 0px;
    height: auto;
  }

  .column.side {

    width: 16%;

    border-left: 1px solid white;
    border-right: 1px solid black;
    height: auto;
  }

  .column.middle {

    width: 68%;

    border-left: 1px solid white;
    border-right: 1px solid black;
    height: auto;
  }

  .row {
    margin-top: 0%;
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 0%;

    border-top: 1px solid white;
    border-bottom: 1px solid black;
    
    display: flex;
  }

  .row:after {
    content: "";
    clear: both;
  }
  
 @media screen and (max-width: 600px) {
  .row {
    display: block;
  }
  .column.side,
  .column.middle {
    position: left;
    display: block;
    width: 100%;
  }
}
 </style>

</head>
<body>

 <div class="row">
  <div class="column side">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
    </p>
  </div>

  <div class="column middle">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec
       neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt
       eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec
       neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt
       eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </div>
  </div>

  <div class="column side">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Maecenas sit amet pretium urna.</p>
  </div>
  
    <script>
    const divs = [...document.querySelectorAll('div.column')];
    const divsHeight = divs.map(div => parseInt(window.getComputedStyle(div).getPropertyValue('height').split('px')[0]));
    const highestDiv = Math.max(...divsHeight);
    divs.forEach(div => div.style.height = highestDiv + 'px');
    </script>

 </div>
</body>
</html>
1

@SQra1975: Usuń ten skrypt z kodu, bo jest niepotrzebny, sam css (flex) załatwi sprawę

  <script>
    const divs = [...document.querySelectorAll('div.column')];
    const divsHeight = divs.map(div => parseInt(window.getComputedStyle(div).getPropertyValue('height').split('px')[0]));
    const highestDiv = Math.max(...divsHeight);
    divs.forEach(div => div.style.height = highestDiv + 'px');
    </script>

Jeśli chodzi o responsywność to sprawdzałem na firefox i chrome - działa :) Zależy tylko co chcesz osiągnąć w widoku mobilnym.
Wywaliłem też floaty, bo są zbyteczne

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

  html {
    box-sizing: content-box;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  body, p, table, tbody, tr, td, ul, ol, li {
    background: #c0c0c0;
    font-family : Tahoma, "DejaVu Sans";
    font-size : 12px;
    margin: 0;
    padding: 0;
  }

  .column {
    background-color: #e0e0e0;
    padding: 0px;
    margin: 0px;
    height: auto;
  }

  .column p {
    background-color: #e0e0e0;
    padding: 0px;
    margin: 0px;
    height: auto;
  }

  .column.side {
    width: 16%;
    border-left: 1px solid white;
    border-right: 1px solid black;
    height: auto;
  }

  .column.middle {
    width: 68%;
    border-left: 1px solid white;
    border-right: 1px solid black;
    height: auto;
  }

  .row {
    margin-top: 0%;
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 0%;
    border-top: 1px solid white;
    border-bottom: 1px solid black;
    display: flex;
  }

  .row:after {
    content: "";
    clear: both;
  }

 @media screen and (max-width: 600px) {
  .row {
    display: block;
  }
  .column.side,
  .column.middle {
    position: left;
    display: block;
    width: 100%;
  }
}
 </style>

</head>
<body>

 <div class="row">
  <div class="column side">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..
    </p>
  </div>

  <div class="column middle">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec
       neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt
       eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec
       neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt
       eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </div>
  </div>

  <div class="column side">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Maecenas sit amet pretium urna.</p>
  </div>

 </div>
</body>
</html>
0

@angry bread: Problem został rozwiązany - Jednak nadal interesuje mnie rozwiązanie za pomocą JS chociaż by po to, abym mógł przeanalizować kod i się poduczyć tego języka, mam tylko jeszcze jedno pytanie, jak przerobić ten kod na konkretną funkcję, żeby ją umieścić w sekcji head (w php już sobie poradzę z tym) i później wywoływać ją w odpowiednim miejscu w kodzie html.

1 użytkowników online, w tym zalogowanych: 0, gości: 1