React - 组件全屏（高度100％）

时间：2016-07-18 03:50:27

标签： css reactjs html5

我坚持要显示一个名为“home”的React组件，它占据屏幕高度的100％。 无论我使用CSS还是React内联样式，它都不起作用。

在下面的示例中， html ，正文和 #app 在CSS中设置为高度：100％。对于 .home 我使用了内联样式（但无论我使用CSS还是内联样式都是一样的）： enter image description here 问题似乎来自<div data-reactroot data-reactid='1'>未设置高度：100％。

如果我使用Chrome开发者工具攻击它，它的工作原理是： enter image description here

那么在React中显示完整高度组件的正确方法是什么？

欢迎任何帮助：）

15 个答案:

答案 0 :(得分：27)

html, body, #app, #app>div {
  height: 100%
}

这将确保所有链都为height: 100%

答案 1 :(得分：21)

这让我烦恼了好几天。最后我使用CSS属性选择器来解决它。

[data-reactroot] 
        {height: 100% !important; }

答案 2 :(得分：14)

你也可以这样做：

body > #root > div {
  height: 100vh;
}

答案 3 :(得分：6)

虽然这可能不是理想的答案，但试试这个：

style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}

它保持大小附着在边框上，这不是你想要的，但会给你一些相同的效果。

答案 4 :(得分：5)

尝试<div style = {{height:"100vh"}}> </div>

答案 5 :(得分：5)

$model->original

始终最小全视角

答案 6 :(得分：2)

TableObject

这对我有用..

答案 7 :(得分：1)

将其添加到index.html头中对我有用：

<style>
    html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>

答案 8 :(得分：1)

我通过app.css中的CSS类来管理此问题

static NetworkManager.performPOST(urlString="bins/9asku", bodyParams=nil,
  completionHandler=0x000000010a7cc650 MVVM

将其应用于render（）方法中的根元素

ListRequest.fetchAllLists(completionHandler=0x000000010a7cf740
  MVVM

或内联

ListPresenter.fetchAndShowList(self=0x0000600002779140) at
  ListPresenter.swift:29:17
      frame #14: 0x000000010a7c5551 MVVM

答案 9 :(得分：1)

在将侧面导航面板的高度显示为100％时，我遇到了同样的问题。

我要解决的步骤是：

在index.css文件中------ 

.html {
height: 100%;
}
.body {
height:100%;
}

在sidePanel.css中（这给了我一些问题）：

.side-panel {
height: 100%;
position: fixed; <--- this is what made the difference and scaled to 100% correctly
}

为清楚起见，删除了其他属性，但我认为问题在于将嵌套容器中的高度缩放到100％，例如您尝试如何缩放嵌套容器中的高度。父类的高度将需要应用100％。 -我很好奇的是为什么要固定：位置会纠正刻度，如果没有刻度就会失败；这是我最终将通过更多实践学习的东西。

我已经使用React工作了一个星期，而且我是Web开发的新手，但是我想分享一个我发现的修复程序，该修复程序将高度缩放到100％。希望这对您或有类似问题的任何人有帮助。祝你好运！

答案 10 :(得分：0)

对于使用CRNA的项目，我使用它 在index.css

中 
html, body, #root {
  height: 100%;
}

然后在我的App.css中使用此

.App {
  height: 100%;
}

，如果有一个eg-

，还将App中的div的高度设置为100％ 
.MainGridContainer {
  display: grid;
  width: 100%;
  height:100%;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 50px auto;
}

答案 11 :(得分：0)

尽管在这里使用React-元素布局完全是html / css功能。

此问题的根本原因在于CSS中height属性的工作方式。当您使用高度的相对值（以％为单位）时-这意味着高度将相对于其父级进行设置。

因此，如果您拥有html > body > div#root > div.app之类的结构-要使div.app的高度为100％，其所有祖先的高度都应为100％。您可以使用下一个示例：

html {
  height: 100%;
}

body {
  height: 100%;
}

div#root {
  height: 100%; /* remove this line to see div.app is no more 100% height */
  background-color: indigo;
  padding: 0 30px;
}

div.app {
  height: 100%;
  background-color: cornsilk;
}
<div id="root">
  <div class="app"> I will be 100% height if my parents are </div>
</div>

很少参数：

  • !important的使用-尽管有一段时间，此功能在大约95％的情况下很有用，但它表明html / css的结构较差。另外，这不是解决当前问题的方法。
  • 为什么不position: absolute。属性positon旨在更改元素相对于（自身位置-相对位置，视口-固定位置，最近的父母（其位置不是静态的-绝对位置））的呈现方式。尽管position: absolute; top: 0; right: 0; bottom: 0; left: 0;仍然会产生相同的外观-它还会促使您将父项position更改为非static的状态-因此您需要保留2个元素。这还会导致父div折叠成一行（高度为0），并且内部为全屏。这使元素检查器感到困惑。

答案 12 :(得分：0)

我一直遇到麻烦，直到我使用检查器并意识到react将所有内容放入id ='root'的div中，以允许100％的高度以及body和html对我有用。

答案 13 :(得分：0)

<div style={{ height: "100vh", background: "#2d405f" }}>
   <Component 1 />
   <Component 2 />
</div>

创建全屏且背景颜色为＃2d405f的div

答案 14 :(得分：-1)

尝试使用！important高度。这可能是因为影响你的html身体的其他一些风格。 

    Controller code of Angular Js...
    FactoryPBD.showPbdCostCompareData(data).success(
        function(result) {
            if(result != ""){
                //doing my processing and working fine

        }).error(function(result,status,message){
            console.log("result" , result);
            //getting undefined in all the above variable
        });


        Service code:
        showPbdCostCompareData : function(filter) {
                promise = $http({
                    url : 'pbd/showPbdCostCompareData?serachFilterJson='+JSON.stringify(filter),
                    method : "POST"
                });
                return promise;
            }

    Java Controller:-

    @RequestMapping(value = "/showPbdCostCompareData", method = RequestMethod.POST)
                public @ResponseBody ResponseEntity<String> showPbdCostCompareData(HttpServletRequest request,
                @RequestParam String serachFilterJson) {
            try {
                if (null != serachFilterJson && !"".equalsIgnoreCase(serachFilterJson)) {
                    Gson gson = new Gson();
                    SearchCriteriaBean searchCriteriaObj = gson.fromJson(serachFilterJson, SearchCriteriaBean.class);
                    CnHeaderBean cnHeaderBean = pbdServiceImpl.getPbdCostCompareCnHeaderData(searchCriteriaObj); //getting the value from sevice
                    List<PbdCostCompareBean> pbdCostCompareList = null;
                    if (null != cnHeaderBean) {
                        if("F".equalsIgnoreCase(cnHeaderBean.getPbdType())){
                            searchCriteriaObj.setFromPartIscb(cnHeaderBean.getFromPartIscb());
                            searchCriteriaObj.setToPartIscb(cnHeaderBean.getToPartIscb());
                            pbdCostCompareList = pbdServiceImpl.getPbdCostComparisonData(searchCriteriaObj); //getting the value from sevice
                        }else{
                            return new ResponseEntity<String>("Incorrect PBD Type",HttpStatus.SERVICE_UNAVAILABLE);
                        }                   
                    } else {
                        return new ResponseEntity<String>(HttpStatus.SERVICE_UNAVAILABLE);
                    }
                    HashMap<Integer, Object> costCompareMap = new HashMap<Integer, Object>();
                    costCompareMap.put(1, cnHeaderBean);
                    costCompareMap.put(2, pbdCostCompareList);
                    costCompareMap.put(3, pbdServiceImpl.validateUserAccess(searchCriteriaObj, serviceUtility.getUserFromSession(request)));
                    String pbdDataJsonResponse = gson.toJson(costCompareMap);
                    return new ResponseEntity<String>(pbdDataJsonResponse, HttpStatus.OK);
                } else {
                    return new ResponseEntity<String>(HttpStatus.SERVICE_UNAVAILABLE);
                }
            } catch (C2PCException e) {
                return new ResponseEntity<String>(e.getMessage(),HttpStatus.SERVICE_UNAVAILABLE);
            }
        }

你也可以在VP中给出值，它会将高度设置为你提到的像for i in range(10): if (i*i*i) % 3 == 1: numbers.append(i*i*i) print (numbers) 那样的端口像素，但这不是便携式的。

相关问题
最新问题