• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z ustawieniem wysokości w %

VPS Starter Arubacloud
+2 głosów
267 wizyt
pytanie zadane 21 lutego 2021 w HTML i CSS przez SALVADOR Początkujący (310 p.)

Witam! Mam pewien problem.

W podanym kodzie mogę ustawić % tylko na szerokość a na wysokość nie daje rady (jedynie w px można ustalić wysokość) Bawiłem się kodem ale niestety nie potrafię zrobić tak aby wysokość była w %, zarówno element  searchButton jak i searchTerm "nie odpowiadają" na zastąpienie px procentem.

Chodzi mi o to żeby to było responsywne.

Proszę o pomoc i pozdrawiam!

.search {
	width: 100%;
	position: relative;
	display: flex;
}

.searchTerm {
	width: 100%;
	border: 3px solid #fff;
	border-right: none;
	padding: 5px;
	height: 20px;
	border-radius: 5px 0 0 5px;
	outline: none;
	color: #9DBFAF;
	
}

.searchTerm:focus{
	color: #000;
}

.searchButton {
	width: 40px;
	border: 1px solid #EB3349;
	height: 36px;
	background: #EB3349;
	text-align: center;
	color: #fff;
	border-radius: 0 5px 5px 0;
	cursor: pointer;
	font-size: 20px;
	outline: none;
}

.wrap{
	width: 60%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

 

komentarz 21 lutego 2021 przez wizarddos Nałogowiec (26,210 p.)
Co znaczy "nie potrafię zrobić tak aby wysokość była w %"?

1 odpowiedź

+2 głosów
odpowiedź 21 lutego 2021 przez Tnifey Pasjonat (24,190 p.)
wybrane 22 lutego 2021 przez SALVADOR
 
Najlepsza

wyobraź sobie sytuację, że ustalasz 30% na dziecku, to dziecko się pomniejsza i rodzic się pomniejsza, i nieskończona pętla :P

jeśli chcesz ustawiać wysokość dzieci w procentach, rodzic musi mieć stałą wysokość,

 

<div class="search">
  <div class="searchTerm">search term</div>
  <div class="searchButton">search button </div>
</div>

.search {
   display: flex;
   height: 500px;
}

.searchTerm {
   height: 30%;
}

.searchButton {
   height: 60%
}

tutaj widzę, że chcesz żeby .searchTerm i .searchButton były na 100% wysokości .search i używasz flexboxa, usuń height z .searchTerm i .searchButton i ustaw align-items: stretch na .search :P

<div class="search">
  <div class="searchTerm">search term</div>
  <div class="searchButton">searchh button </div>
</div>

.search {
   display: flex;
   align-items: stretch;
}

 

komentarz 21 lutego 2021 przez SALVADOR Początkujący (310 p.)

Dzięki za odpowiedź ale chyba coś źle zrobiłem/zrozumiałem oto jak wpisałem:

.search {
    display: flex;
    height: 500px;
	width: 100%;
	position: relative;
	}
 
.searchTerm {
    height: 4.8%;
   	width: 100%;
	border: 3px solid #fff;
	border-right: none;
	padding: 5px;
	border-radius: 5px 0 0 5px;
	outline: none;
	color: #000;
}
 
.searchButton {
    height: 8%;
   	width: 40px;
	border: 1px solid #EB3349;
	background: #EB3349;
	text-align: center;
	color: #fff;
	border-radius: 0 5px 5px 0;
	cursor: pointer;
	font-size: 20px;
	outline: none;
}

.wrap{
	width: 60%;
	position: absolute;
	margin-left:20%;
    margin-top:15%;
}

niestety jakoś mi to nie działa i search nie skaluje się tak jak powinien.

Nie działa również jak usuwam height i wpisuje    align-items: stretch; w .search to też nie skaluje się.

Pozdrawiam

komentarz 21 lutego 2021 przez Tnifey Pasjonat (24,190 p.)
a pokaż jak to masz w html ułożone oraz fajnie by było jakbyś narysował, jak chcesz żeby to docelowo wyglądało :P
komentarz 21 lutego 2021 przez SALVADOR Początkujący (310 p.)

No to tak to wygląda w html: 

<div class="wrap">
        <div class="search">
         <input type="text" class="searchTerm" placeholder="Szukaj...">
         <button type="submit" class="searchButton">
          <img src="searchico.png" width="50%" height="50%">
          <i class="fa fa-search"></i>
         </button>
        </div>
       </div>

A wydaje chciałbym żeby to było po prostu responsywne tzn. skalowało się , dopasowywało do wielkosci monitora/karty 

komentarz 21 lutego 2021 przez Tnifey Pasjonat (24,190 p.)
edycja 21 lutego 2021 przez Tnifey

to zmienia postać rzeczy :p

.wrap źle ogarnąłeś i dlatego Ci nie skaluje

musisz przypisać top i left oraz wysokość .wrap,  ty zamiast tego użyłeś marginesów i to tak średnio działa w tym wypadku. 

tutaj na szybko skleiłem i okomentowałem:

https://codepen.io/Tnifey/pen/xxRXVGw?editors=1100

@edit: edytowałem przed chwilą tego codepena, żeby dostosować wysokość .searchButton i .searchTerm w stosunku do .search

podmieniłem też % w .wrap na viewport units

komentarz 22 lutego 2021 przez SALVADOR Początkujący (310 p.)
Dzięki, działa :D

Podobne pytania

0 głosów
2 odpowiedzi 123 wizyt
0 głosów
1 odpowiedź 262 wizyt
pytanie zadane 10 lutego 2022 w HTML i CSS przez oleksik Użytkownik (610 p.)
+1 głos
1 odpowiedź 169 wizyt
pytanie zadane 24 sierpnia 2021 w HTML i CSS przez ShockWave Bywalec (2,350 p.)

92,843 zapytań

141,782 odpowiedzi

320,858 komentarzy

62,174 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...