Question

我目前正在网站上工作。我已经查看了类似的问题，但没有找到解决我困境的方法。当涉及高度时，我应用于外部甚至内联CSS的更改总是被忽略。但是，我可以自由地改变div的宽度。

发生了什么？我错过了什么？

<div id="mainsection" style="height: 100%; width: 100%; border: 5px solid red; display: block;">

            <!-- Header
============================================= -->
<header id="header" class="transparent-header style-1 dark no-sticky">

        <div id="header-wrap">

            <div class="container clearfix">

                <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

                <!-- Logo
                ============================================= -->
                <div id="logo">
                    <a href="index.php" class="standard-logo" data-dark-logo="images/logo.png"><img src="images/logo.png" alt="Brasillis Idiomas Logo"></a>
                    <a href="index.php" class="retina-logo" data-dark-logo="images/logo.png"><img src="images/logo.png" alt="Brasillis Idiomas Logo"></a>
                </div><!-- #logo end -->

                <!-- Primary Navigation
                ============================================= -->
                <nav id="primary-menu" class="sub-title">

                    <ul >
                        <li><a href="index.php"><div>Home</div><span >Brasillis e você</span></a></li>
                        <li><a href="quemsomos.php"><div>Quem Somos</div><span >Desde 1992</span></a></li>
                        <li><a href="cursos.php"><div>Cursos</div><span >Idiomas e intérpretes</span></a></li>
                        <li><a href="servicos.php"><div>Serviços</div><span >Tradução e Transcrição</span></a></li>
                        <li><a href="contato.php"><div>Contato</div><span >E informações</span></a></li>
                    </ul>

                </nav><!-- #primary-menu end -->

            </div>

        </div>
</header><!-- #header end -->
        <section id="page-title" class="page-title-parallax page-title-dark page-title-center" style="background-image: url('images/fotos/BrasillisOficialEscuro.jpg'); background-size: cover; background-position: top center;" data-stellar-background-ratio="0.8">
            <div class="container clearfix">
                <h1 style="font-size: 3em;">Seja bem vindo ao Brasillis</h1>
                <span>Milhares de alunos formados e eventos bem-sucedidos desde 1992</span>
            </div>
        </section>

        <div class="clearfix col_full">
                <div class="col_full common-height">

                    <div class="col-md-4 dark col-padding ohidden" style="background-color: #32587E; box-shadow: 3px 3px 5px #ccc;">
                        <div>
                            <h3 class="uppercase" style="font-weight: 600;">NOSSOS CURSOS</h3>
                            <p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p>
                            <a href="cursos.php" class="button button-border button-light button-rounded uppercase nomargin">Saiba mais</a>
                        </div>
                        <i class="icon-comments bgicon"></i>
                    </div>

                    <div class="col-md-4 col-padding ohidden" style="background-color: #F1F1F1; box-shadow: 3px 3px 5px #ccc;">
                        <div>
                            <h3 class="uppercase" style="font-weight: 600;">NOSSOS SERVIÇOS</h3>
                            <p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p>
                            <a href="servicos.php" class="button button-border button button-rounded uppercase nomargin">Saiba mais</a>
                        </div>
                        <i class="icon-briefcase bgicon"></i>
                    </div>

                    <div class="col-md-4 dark col-padding ohidden" style="background-color: #339933; box-shadow: 3px 3px 5px #ccc;">
                        <div>
                            <h3 class="uppercase" style="font-weight: 600;">PORTAL DO ALUNO</h3>
                            <p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p>
                            <a href="cursos.php" class="button button-border button-light button-rounded uppercase nomargin">Em breve</a>
                        </div>
                        <i class="icon-user bgicon"></i>
                    </div>

                </div>
        </div>

    </div>

Answer 1

到目前为止，我可以看到你使用身高：100％。这样做不行，我不知道为什么不行，但我已经厌倦了你。

你可以使用身高：100vh; vh表示：查看高度，这意味着它将占用您正在观看的屏幕的高度。

Answer 2

首先：如果您不想让任何人获取您的代码，您就无法在线发布您的网站。上传后，每个人都可以获取您的代码。

让我回答你的问题。你有没有想过100％意味着什么？如果在容器内放入更多输入，则完整高度将发生变化，实际上参数高度可能高于视口高度。你想要＆＃34; 100％＆＃34;视口高度，所以使用＆＃34; 100vh＆＃34;而不是＆＃34; 100％＆＃34; ！

String[] p = { "A", "B", "C", "D" }; 
String b = ""; 

for ( String q : p ) 
   b = q + b; 

System.out.println( b );

无法将div的高度更改为100％（但可以更改宽度）

2 个答案: