Dygraph를 div에서 높이를 채우려면 어떻게 만듭니 까?

DyGraph를 올바른 높이로 렌더링 할 수 없습니다. 나의 이상은 그래프가 메인 브라우저 영역 높이의 100 %가되는 것이다.Dygraph를 div에서 높이를 채우려면 어떻게 만듭니 까?

즉, navbar와 footer 사이의 모든 공간을 채우고 싶습니다.

아래의 설정을 통해 그래프를 얻을 수 있지만 단지 하나의 수평선에 불과합니다. 사용할 수있는 공간을 채우려면 px 높이를 지정하고 싶지 않습니다.

_PnlDyGraph.cshtml :

<script type="text/javascript" src="dygraph-combined-dev.js"></script> 
<h1>Title</h1> 
<div id="mygrapharea" style="width: 100%; height:100%;"></div> 
<script type="text/javascript"> 
    @{ 
     string txtER = (string)Session["PnlDataForChart"]; 
      <text> 
       var dataT = "@txtER" 
      </text> 
    } 
    g = new Dygraph(document.getElementById("mygrapharea"), 
       dataT 
     ); 
</script>

_Traders.cshtml :

<div class="row"> 
    <div class="col-sm-6"> 
     @Html.Partial("~/Views/Employee/_PnlDyGraph.cshtml") 
    </div> 
</div>

_Layoutcshtml : 당신은 픽셀이 다른 사업부의 사업부 지정된 DIV의 높이를 작성해야

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    @*<title>@ViewBag.Title - Platform</title>*@ 
    <title>Platform</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 

</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <img src="~/Images/Banner_Front.png" alt="Banner" style="width:300px;height:50px;"/> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li>@Html.ActionLink("Home", "Index", "Home")</li> 
        <li>@Html.ActionLink("Traders", "Traders", "Traders")</li> 
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
       </ul> 
       @Html.Partial("_LoginPartial") 
      </div> 
     </div> 
    </div> 
    <div class="container body-content"> 
     @RenderBody() 

     <hr /> 
     <footer> 
      @*<p>&copy; @DateTime.Now.Year</p>*@ 
     </footer> 
    </div> 

    @*@Scripts.Render("~/bundles/jquery")*@ 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 
</html>

출처

2016-11-04 ManInMoon

div의 높이를 기준으로 페이지 크기를 조정하면 DyGraph의 크기가 자동으로 조정되지 않으므로 DyGraph의 resize() 메소드를 사용해야합니다. 같은 gygraph 집합 변수는 g1 다음 g1.resize(); 내 응용 프로그램에서 작동합니다. –

'g = new Dygraph (document.getElementById ("mygrapharea"), dataT ) 이후에 포함되었습니다. g.resize();' – ManInMoon

이고 문제는 여전히 동일합니다 – ManInMoon

및 inner div에서 퍼센트로 지정됩니다.

내용이 없으면 높이의 백분율을 계산할 값이 없습니다. 그러나 부모가 지정되지 않은 경우 너비는 DOM에서 백분율을 사용합니다.

예를 들면.

<div id="parent" style="width: 100px; height: 1000px; background-color: orange"> 
    <div id="mygrapharea" style="width: 100px; height: 100%; background-color: blue"></div> 
</div>

는 내가 그것을 것이다 당신에게

출처

2016-11-04 08:54:52

div 및 단락의 높이를 100 %로 설정하고 div에 실제로 두 개의 상위 요소 ( 및 )가 있어야합니다. div의 높이를 상대적 높이로 정의하려면 body 및 html 요소의 높이도 설정해야합니다. 따라서 CSS를 사용하여 div뿐 아니라 body 및 html 요소의 높이를 설정해야합니다. 100 % 높이로 설정 한 모든 것을 빨리 처리 할 수 있으므로 원하는 효과를 얻으려면이 작업이 어려울 수 있습니다. –

이 작동

도움이되기를 바랍니다! 마지막으로, 나는 vh 스타일 옵션에 대해 들었다.

출처

2016-11-04 14:02:37 ManInMoon

Dygraph를 div에서 높이를 채우려면 어떻게 만듭니 까?

답변

관련 문제