☰

» »

[HTML + CSS] Kako HTML A element raztegnat na max višino/širino, glede na velikost parrent elementa?

[HTML + CSS] Kako HTML A element raztegnat na max višino/širino, glede na velikost parrent elementa?

HotBurek ::

Pozdravljeni.

Evo, tokrat imam pa HTML + CSS vprašanje.

Nampreč, kako raztegnat HTML A element na max višino/širino, glede na to, koliko je velik parrent element?


Slikca:


Želele bi, da je HTML A element, ki ima rdeč 4px border, visok (in širok) toliko, da prekrije celoten pinki TD element. Tako, da je celoten "TD" prostor klikabilen.

Sample:
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>test</title>
		<style>
			* { box-sizing: border-box; }
			.this1:hover { cursor: pointer !important; border: 4px solid dodgerblue !important; }
		</style>
	</head>
	<body>
		<table style="border: 1px solid black; border-collapse: collapse; margin: 40px;">
			<tbody>
				<tr>
					<td style="width: 200px; height: 200px; background-color: greenyellow; text-align: center;">test123</td>
					<td style="padding: 0px; background-color: pink; border-left: 1px solid black; text-align: center;">
						<a class="this1" href="/" style="display: block; text-decoration: none; border: 4px solid red;">
							<div style="display: table-cell; background-color: yellow; text-align: center;">
								<div style="width: 10px; height: 10px; background-color: green; display: inline-block;"></div>
								<div style="background-color: aqua; padding: 2px 6px; color: black;">456test654</div>
							</div>
						</a>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window
  • spremenilo: HotBurek ()

kljuka13 :: 

width: 100%; height: 100%;

Netrunner ::

Opcije so še, da daš parent elementu position relative in child elementu position aboslute in določiš top right bottom in left 0px, kar je sicer bolj mimo rešitev :) ... bolj optimalno pa je da uporabiš display flex in opcije ki jih ponuja
Doing nothing is very hard to do... you never know when you're finished.

HotBurek ::

Hvala za ta predlog (relative/absolute + top,right,bottom,left). Sem uporabil to s kombinacijo display: inline-table/table-cell, in po treh urah štrikanja mi je nekako ratalo rešit zadevo.

Testirano na FF in dela, na IE pa še nisem testiral, ker bi rad imel lep sončen dan še naprej.
root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window

Zgodovina sprememb…

  • spremenilo: HotBurek ()

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1298345317 (4454) sunniegoldie
»

Prikaz HTML elementa nad drugim?

Oddelek: Izdelava spletišč		91936 (1603) Netrunner
»

poravnava li elementov

Oddelek: Izdelava spletišč		82139 (2004) boss-tech
»

Html in CSS

Oddelek: Izdelava spletišč		192263 (1816) mte
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč		519791 (7590) nuuush

Več podobnih tem