Question

我有这个网站：

http://avocat2.dac-proiect.ro/?page_id=21

我们使用firebug对代码进行了一些更改并获得了这些项目（仍未在网站上进行更改）

以下更改看起来像我的网站元素

这是代码HTML：

     <div class="container-fluid" style="">
          <div class="entry-content2">
               <div class="gigi">
                    <div class="row">
                    <div class="col-sm-12  col-md-12  col-lg-12  style=" "="">
                         <img src="wp-content/themes/WordPressBootstrap-master/images/LOGOb.png" class="img-responsive center-block" style="min-width:156px;min-height:83px">
                    </div>
               </div>
          </div>
          <div class="container-fluid">
               <p class="text-center" style="color:white;font-size:17px;padding-left:50px;padding-right:50px;padding-top:20px;padding-bottom:20px;">
                    Am reprezentat şi am acordat consultanţă juridică pentru clienţi persoane fizice române şi străine, instituţii publice, persoane juridice române şi străine în următoarele domenii:
               </p>
               <div class="row sss">
                    <div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-2" style="font-size:17px;color:white;">
                         <p class="text-left">
                              Drept civil<br>
                              – agricultură, exploatări agricole, prelucrarea şi comercializarea produselor agricole;<br>
                              – comerţ cu produse alimentare;<br>
                              – imobiliar;<br>
                              – distribuţie de carburanţi;<br>
                              – transporturi;<br>
                              – asigurări;<br>
                              – producţie şi comercializare utilaje grele;<br>
                              – producţie structuri metalice;<br>
                              – design, fotografie, artă;
                         </p>
                         <p></p>
                    </div>
                    <div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-0" style="font-size:17px;color:white;">
                         <p class="text-left">
                              Drept administrativ<br>
                              – producţie automatizări;<br>
                              – servicii de proiectare;<br>
                              – comercializare automatizări;<br>
                              – jocuri de noroc;<br>
                              – turism, hoteluri şi pensiuni;<br>
                              – medical;<br>
                              – construcţii civile şi industriale;<br>
                              – comercializare utilaje şi autovehicule, service auto;<br>
                              – producţie software, administrarea site-urilor;
                         </p>
                          <p></p>
                    </div>
                    <div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-0" style="font-size:17px;color:white;">
                         <p class="text-left">
                              – comerţ;<br>
                              – bursier, societăţi listate, investitori, fonduri de investiţii;<br>
                              – asistenţă şi îngrijire copii şi vârstnici;<br>
                              – exploatări forestiere şi prelucrarea lemnului;<br>
                              – extracţia şi prelucrarea minereurilor;<br>
                              – producţia şi comercializarea materialelor de construcţii;<br>
                              – instituţii publice;<br>
                              – instituţii religioase.
                         </p>
                         <p></p>
                    </div>
                    <p></p>
               </div>
          </div>
     </div><!-- .entry-content -->
</div>

我把照片更好地理解我想做什么

我搜索过，我发现这里的方法可以给出100％的元素高度

Make div 100% height of browser window

不幸的是，我们在下面应用了100vh代码并且看起来并不好。

.entry-content2
{
    background:url("http://avocat2.dac-proiect.ro/wp-content/themes/WordPressBootstrap-master/images/BODY-DROP.png");
    width:100%;
    height:100vh; // Here I applied this change      
}

我不知道我是否正确地应用了这项修正案，该项目是。

你能帮我解决这个问题吗？提前谢谢！

Answer 1

我怀疑你想将整个<header id="masthead" class="navbar navbar-default" role="banner" style="background: transparent;">元素移到网站的顶部。现在该元素被设置为

.navbar-default {
  background-color: #f8f8f8;
  position: fixed;
  bottom: 12px;
  width: 100%;
}

该指令表示将屏幕底部的整个标题元素（紫色框）固定，因此当用户滚动时它始终存在。这是你的意图吗？对于要显示用户的大元素，然后让它们向下滚动以查看主页的其余部分，您可能最好使用position：relative。此时，如果没有主页内容，该网站根本不会滚动，那里没有任何内容。

再次，用简单的话来说，你究竟想要实现什么目标？

更新：我想你要移动徽标元素

<div class="col-sm-12  col-md-12  col-lg-12  style=" "="">
       <img src="wp-content/themes/WordPressBootstrap-master/images/LOGOb.png" class="img-responsive center-block" style="min-width:156px;min-height:83px">
    </div>

从其当前位置到<header>元素的内部和顶部。

容易做到。这个站点是静态html，还是从.php表单生成的？这是一个WordPress网站？您只需在html表中移动代码即可。如果这是WordPress（或其他内容管理系统），它有点困难。你必须在.php代码中完成它。

糟糕。这是一个wordpress主题。两个强烈的建议。

1）学习如何做一个儿童主题。学习只需15分钟，将为您节省数小时的工作时间。想想这是一张你现有/购买主题的魔术纸。你所有的工作都在纸巾上。当主题更新时，您不会丢失任何工作。

2）了解如何使用3D View Tool in Firefox 这将告诉您徽标元素与紫色标题的其余部分不在同一“框中”。要到达那里，右键单击firefox中的屏幕。单击Inspect Element。这将使您进入Mozilla Developer工具。然后检查开发人员工具栏右侧的小齿轮图标。选择[] 3D视图。这会在开发人员工具栏上放置一个3D框图标。现在你可以很容易地看到这个站点有很多嵌套的DIVS，其中一些没有多大意义。这是您的主页模板，您可以根据需要使其变得简单。

3）Wordpress是地球上最好的文档工具之一。找一个简单的教程并从那里开始（在你创建一个孩子主题之后）。

祝你好运。

Answer 2

当我把你的代码放在我的JSFiddle中时，我就可以运行了。我带了你的CSS，我添加的唯一内容是color: #ffffff;，所以我可以阅读文字。

.entry-content2
{
    background-image:url("http://avocat2.dac-proiect.ro/wp-content/themes/WordPressBootstrap-master/images/BODY-DROP.png");
    color: #ffffff; // just added color
    width:100%;
    height:100vh; 
}

您可以看到小提琴here的结果，它也会创建一个全屏div。

所以，如果这个小提琴不适合你，那么我怀疑它一定是浏览器的问题？或.entry-content2 div之前的标签。你可以把你的完整的CSS和HTML代码放在小提琴和测试中。

你可以play around with the fiddle

我怎样才能给出我的全高度元素？CSS

2 个答案: