html - 为什么div高度没有改变？

Question

哟，我有一个 div，我试图给它一个特定的年龄段高度。它拒绝合作。我可以改变宽度，但不能改变高度。有人知道原因吗？是否有任何属性会影响我设置特定 div 大小的能力？

这是我的 HTML，虽然我对每个 div 都有同样的问题，但最让我沮丧的是带有标签“priser”的 div。我会给你一张图片来展示它如何导致不同浏览器的不同位置(称为“Prisinformasjon”的矩形是“priser”-div 的输出):

<form method='POST' id='form1' runat='server' autocomplete='off'>

        <div id="screenie" style="position: relative; width: 100%; height: 100%; font-family: 'Malgun Gothic'; font-weight: 400;">
        <div style="margin-top: 15px;">
            
            <div id="Tjenesteinformasjon" style='width: 300px; height: 335px; text-align: center; position: absolute; left: 30px; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
                <span style='font-size: 26px;'>Hva gjør vi?</span><br />
                    
                <p style='color:black;'>Vi tilbyr flyttehjelp, flyttevask, varetaxi/budbil, transport og utleie av biltransporthenger!<br /><br />
                Vennligst benytt bestillingsskjema til høyre for å få et tilbud raskt og enkelt (bestilling er ikke bindende)!<br /><br />
                Ønsker du å kontakte oss manuelt, enten for bestilling, informasjon eller kundeservice, kan du også bruke kontakt- og bedriftsinformasjonen nedenfor.</p>
            </div>

            <div id="Center-div" style="width: 550px; position: absolute; left: 380px;">
                <div style='color: black;  border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
                <div style="text-align: center;">

                <div id="skjematype_a" style="display: block; width: 265px; height: 75px; margin-left: 120px; color: black; font-size: 11.75px; text-align: center; border-width: 3px; border-style: outset; border-color: #00e6ab;">
                    <img id="bil" src="/images/bil.jpg" onclick="changeImage()" style="width: 135px; height: 75px; float: left; padding-right: 2px;" />
                    <div id="skjematype_b">Klikk på bildet for å bytte bestillingskjema til <b>biltransporthenger.</b></div>
                </div>

                <script>
                    function changeImage()
                    {
                        var bestillingstekst = document.getElementById('bestillingstekst')
                        var bestillingstekst2 = document.getElementById('bestillingstekst2')
                        var block = document.getElementById('skjematype_a')
                        var s_text = document.getElementById('skjematype_b')
                        var image = document.getElementById('bil');
                        if (image.src.match("bil"))
                            {
                            image.src = "/images/henger.jpg"
                            s_text.innerHTML = "Klikk på bildet for å bytte bestillingskjema til <b>transport</b> og <b>flyttetjenester.</b>"
                            bestillingstekst.hidden = 'hidden'
                            bestillingstekst2.hidden = ''
                            }
                        else
                            {
                            image.src = "/images/bil.jpg";
                            s_text.innerHTML = "Klikk på bildet for å bytte bestillingskjema til <b>biltransporthenger.</b>"
                            bestillingstekst.hidden = ''
                            bestillingstekst2.hidden = 'hidden'
                            }
                    }
                </script>
                
                <div id='bestillingstekst' class='bestillingstekst'>
                    <p>
                        <span style='font-size: 26px;'>Bli kontaktet med tilbud på sms!</span><br />
                        <span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span>
                    </p>

                    <p class='question'>Hvilke tjenester ønsker du?</p>

                        <label>Flyttehjelp<input id='fhjelp' type='checkbox' name='tjenester' runat='server'/></label>
                        <label>Flyttevask<input id='fvask' type='checkbox' name='tjenester' runat='server'/></label></>
                        <label>Transport<input id='transport' type='checkbox' name='tjenester' runat='server'/></label></>
                    

                    <p class='question'>Hvordan ønsker du å betale?</p>

                        <label>Kontant<input id='kontant' type='radio' name='betaling' runat='server'/></label></>
                        <label>Faktura<input id='faktura' type='radio' name='betaling' runat='server'/></label></>
                    
                    <p class="question">Hva synes du er en god pris for jobben?</p>
                        <div style='width: 100%; display: inline-block; text-align: left; line-height: 22px;'>
                            <label>Pris i kroner:<input style='width: 150px; display: inline-block; float:right;' id='pris1' type='tel' maxlength='8' runat='server'/></label>
                        </div>

                    <p class='question'>Er du privatperson eller bedrift?</p>

                        <label>Privat<input id='privat' type='radio' name='kundetype' runat='server'/></label></>
                        <label>Bedrift<input id='bedrift' type='radio' name='kundetype' runat='server'/></label></>
                    

                    <p class='question'>Hvordan kontakter vi deg?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Fullt personnavn<input style='width: 150px; display: inline-block; float:right;' id='personnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Bedriftsnavn<span class='psmall'> (kun for bedrifter)</span><input style='width: 150px; display: inline-block; float:right;' id='bedriftsnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Mobilnr.<input style='width: 150px; display: inline-block; float:right;' id='tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Alternativt telefonnr.<input style='width: 150px; display: inline-block; float:right;' id='alt_tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Epost<input style='width: 150px; display: inline-block; float:right;' id='epost' type='email' runat='server'/></label>
                        <br />
                    
                    </div>

                    <p class='question'>Hva er beste dato og tidspunkt for tjenesten(e)?</p>
                    <p class='psmall2'>(bare endr tidspunkt for tjenestene du skal ha)</p>
                    
                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'>
                        <label>Flyttehjelp<input style='width: 150px; display: inline-block; float:right;' id='fhjelp_tid' type='datetime-local'  value='2020-01-01T10:00:00' runat='server'/></label>
                        <br />

                        <label>Utflyttingsvask<input style='width: 150px; display: inline-block; float:right;' id='fvask_tid' type='datetime-local'  value='2020-01-01T10:00:00' runat='server'/></label>
                        <br />

                        <label>Tilflyttingsvask<input style='width: 150px; display: inline-block; float:right;' id='fvask_tid2' type='datetime-local'  value='2020-01-01T10:00:00' runat='server'/></label>
                        <br />

                        <label>Transport<input style='width: 150px; display: inline-block; float:right;' id='transport_tid' type='datetime-local'  value='2020-01-01T10:00:00' runat='server'/></label> 
                        <br />

                    </div>

                    <p class='question'>Hvor skal tjenesten(e) starte?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Adresse<input style='width: 150px; display: inline-block; float:right;' id='adresse1' type='text' runat='server'/></label>
                        <br />

                        <label>Poststed<input style='width: 150px; display: inline-block; float:right;' id='poststed1' type='text' runat='server'/></label>
                        <br />

                        <label>Postnr.<input style='width: 150px; display: inline-block; float:right;' id='postnr1' type='text' maxlength='4' runat='server'/></label>
                        <br />

                        <label>Etasje<input style='width: 150px; display: inline-block; float:right;' id='etasje1' type='tel' maxlength='2' runat='server'/></label>
                        <br />

                        <label>Ca. kvadratmeter <span class='psmall'>(trengs bare ved utflyttingsvask)</span><input style='width: 150px; display: inline-block; float:right;' id='kvadratmeter1' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Bygningstype<input style='width: 150px; display: inline-block; float:right;' id='bygningstype1' type='text' runat='server'/></label>
                        <br />

                        <label>Heis?</label>
                        <div style='display: inline-block; float:right;'>
                            <label>Ja<input id='heisja1' type='radio' name='heis1' runat='server'/></label>
                            <label>Nei<input id='heisnei1' type='radio' name='heis1' class='radioleft' runat='server'/></label>
                        </div>
                        <br />

                    </div>
                        
                    <p class='question'>Hvor skal tjenesten(e) avslutte(s)?</p>
                    <p class='psmall2'>(ikke fyll inn viss kun utflyttingsvask)</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Adresse<input style='width: 150px; display: inline-block; float:right;' id='adresse2' type='text' runat='server'/></label>
                        <br />

                        <label>Poststed<input style='width: 150px; display: inline-block; float:right;' id='poststed2' type='text' runat='server'/></label>
                        <br />

                        <label>Postnr.<input style='width: 150px; display: inline-block; float:right;' id='postnr2' type='text' maxlength='4' runat='server'/></label>
                        <br />

                        <label>Etasje<input style='width: 150px; display: inline-block; float:right;' id='etasje2' type='tel' maxlength='2' runat='server'/></label>
                        <br />

                        <label>Ca. kvadratmeter <span class='psmall'>(trengs bare ved tilflyttingsvask)</span><input style='width: 150px; display: inline-block; float:right;' id='kvadratmeter2' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Bygningstype<input style='width: 150px; display: inline-block; float:right;' id='bygningstype2' type='text' runat='server'/></label>
                        <br />

                        <label>Heis?</label>
                        <div style='display: inline-block; float:right;'>
                            <label>Ja<input id='heisja2' type='radio' name='heis2' runat='server'/></label>
                            <label>Nei<input id='heisnei2' type='radio' name='heis2' class='radioleft' runat='server'/></label>
                        </div>
                        <br />

                    </div>
                        
                    <p class='question'>Hva ønsker du fraktet (og annet vi bør vite)?</p>
                    <textarea id='textarea1' rows='6' cols='32' spellcheck='False' name='S1' runat='server'>Du behøver ikke skrive noe her viss du ikke trenger det...</textarea><br />
                    <button style='margin-top: 2px;' id='Button2' form='form1' type='submit' onserverclick='sendemail' runat='server'>Kontakt meg med et tilbud!</button>
                </div>

                <div hidden="hidden" id='bestillingstekst2' class='bestillingstekst'>
                
                     <p>
                        <span style='font-size: 26px;'>Bli kontaktet med tilbud på sms!</span><br />
                        <span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span>
                    </p>

                    <p class='question'>Hvordan ønsker du å betale?</p>

                        <label>Kontant<input id='leie_kontant' type='radio' name='betaling' runat='server'/></label></>
                        <label>Faktura<input id='leie_faktura' type='radio' name='betaling' runat='server'/></label></>

                    <p class="question">Hva synes du er en god pris for leie?</p>
                    <p class='psmall2'>(fastpriser inntil 1 døgn: 300kr/400kr/500kr under 4/8/24 timer)</p>
                        <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                            <label>Pris i kroner:<input style='width: 150px; display: inline-block; float:right;' id='pris2' type='tel' maxlength='8' runat='server'/></label>
                        </div>
                
                    <p class='question'>Er du privatperson eller bedrift?</p>

                        <label>Privat<input id='leie_privat' type='radio' name='kundetype' runat='server'/></label></>
                        <label>Bedrift<input id='leie_bedrift' type='radio' name='kundetype' runat='server'/></label></>
                    

                    <p class='question'>Hvordan kontakter vi deg?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Fullt personnavn<input style='width: 150px; display: inline-block; float:right;' id='leie_personnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Bedriftsnavn<span class='psmall'> (kun for bedrifter)</span><input style='width: 150px; display: inline-block; float:right;' id='leie_bedriftsnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Mobilnr.<input style='width: 150px; display: inline-block; float:right;' id='leie_tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Alternativt telefonnr.<input style='width: 150px; display: inline-block; float:right;' id='leie_alt_tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Epost<input style='width: 150px; display: inline-block; float:right;' id='leie_epost' type='email' runat='server'/></label>
                        <br />
                    
                    </div>

                    <p class='question'>Når ønsker du å leie?</p>
                    
                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'>
                        <label>Leiestart<input style='width: 150px; display: inline-block; float:right;' id='leiestart' type='datetime-local'  value='2020-01-01T10:00:00' runat='server'/></label>
                        <br />

                        <label>Leieslutt<input style='width: 150px; display: inline-block; float:right;' id='leieslutt' type='datetime-local'  value='2020-01-01T10:00:00' runat='server'/></label>
                        <br />

                    </div>

                    <p class='question'>Hva er adressen din?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Adresse<input style='width: 150px; display: inline-block; float:right;' id='leie_adresse' type='text' runat='server'/></label>
                        <br />

                        <label>Poststed<input style='width: 150px; display: inline-block; float:right;' id='leie_poststed' type='text' runat='server'/></label>
                        <br />

                        <label>Postnr.<input style='width: 150px; display: inline-block; float:right;' id='leie_postnr' type='text' maxlength='4' runat='server'/></label>
                        <br />

                    </div>

                    <p class='question'>Noe mer vi bør vite?</p>
                    <textarea id='textarea2' rows='6' cols='32' spellcheck='False' name='S1' runat='server'>Du behøver ikke skrive noe her viss du ikke trenger det...</textarea><br />
                    <button style='margin-top: 2px;' id='Button1' form='form1' type='submit' onserverclick='sendemail2' runat='server'>Kontakt meg med et tilbud!</button>
                </div>

                </div>
                </div>
            </div>

            <img style="width: 315px; height: 245px; position:absolute; left: 955px;" src='/images/logo.jpg'/ alt='logo'/>
            
            <div id="Priser" style="width: 300px; position:absolute; left: 45px; top: 375px">
            <div style="text-align: center; color: black; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;">
                <span style='font-size: 26px;'>Prisinformasjon:</span><br />
                <p>
                    Priser avtales som en fast sum på forhånd! Du skal aldri betale mer enn denne prisen!<br />
                    <span style="color: red; font-weight: 600; font-size: 19px;">Det er viktig for oss at du er fornøyd med prisen din! Derfor kan du gi oss et tilbud i bestillingskjema til høyre! Ikke glem å fortell oss hva du ønsker!</span>
                </p>
            </div>
            </div>

             <div id="Kontaktinformasjon" style='width: 300px; height: 190px; position:absolute; left: 30px; top: 700px; text-align: center; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
                <span style='font-size: 26px;'>Hvordan kontakte oss?</span><br />
                    
                <p style='color:black;'>epost: post@hjelpsommefolk.no<br />tlf: 92 53 48 35<br/>Organisasjonsnr.: 916 043 112<br/>
                Postadresse: Nøsteveien 60, 3413 Lier<br/>Kontaktperson: Mantas Tamosiunas</p>
            </div>

            <div id="Finn" style='width: 300px; height: 265px; position:absolute; left: 950px; top: 265px; text-align: center; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
                <p style="font-size: 16px; font-style: italic;">Se våre finn.no referanser i linken under! <a href="http://www.finn.no/smajobber/profiler/510702027/">http://www.finn.no/smajobber...</a></p>
                <img  style="" src='/images/finn1.PNG'/>
                <img  style="" src='/images/finn2.PNG'/>
                <img  style="" src='/images/finn3.PNG'/>
            </div>

            <div id="Facebook" style="width: 300px; position:absolute; left: 965px; top: 580px;">
                <div style="text-align: center;">        
                <div style="color: black; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;">
                <h4 style="font-style: italic;">
                    Liker du oss? Vis det her! <3
                </h4>

                <div class="fb-like" data-href="http://hjelpsommefolk.no" data-width="100" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
                <br />
                <div class="fb-comments" data-href="http://hjelpsommefolk.no" data-width="275" data-numposts="6"></div>
                
                </div>
                </div>
            </div>

            </div>
            </div>

        <script type="text/javascript">
            var screen_width_string = ((screen.width * 0.5)-(1265*0.5)-30);
            var screen_width_string = screen_width_string + "px";
            document.getElementById('screenie').style.marginLeft = screen_width_string;
        </script>

    </form>

Answer 1

您将不得不在最后调整边距，因为它是显示不正确的地方。正如 Niet 所说，使用绝对定位无法赢得与浏览器的战斗，至少目前是这样。