Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div id="main"> <div id="levy" onclick="vyrovnej()"> in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="pravy">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est ladwadwadwadwadwa dawdaw borum. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est ladwadwadwadwadwa cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est ladwadwadwadwadwa cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est ladwadwadwadwadwacitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#main { width: 80vw; min-width: 300px; background: white; min-height: 70vh; margin: 10vh auto; position: relative; } #levy,#pravy { min-height: 70vh; /*float:left;*/ display: inline-block; padding: 15px; } #levy { width: 150px; background-color: grey; float:left } #pravy { width: calc(100% - 210px); background-color: green; }
CSS
Autoformát
CSS reset
Až na konci
function vyrovnej(){ var maly = document.querySelector('#levy'); var lvyska = document.querySelector('#levy').offsetHeight; var pvyska = document.querySelector('#pravy').offsetHeight; var padding = parseFloat(window.getComputedStyle(maly).getPropertyValue('padding')); var zvetsi = pvyska - 2 * padding; if (lvyska < pvyska) { document.querySelector('#levy').style.height = zvetsi+"px"; alert('Dorovnáno'); } else { alert('Nebylo potřeba dorovnat'); } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>