Высота Div на странице прокрутки

Iam new to css. У меня есть div, высота которого я устанавливаю равной 100%. но когда список на странице превышает размер страницы, div не отображается при прокрутке страницы, что мне делать? Вот мой код:Высота Div на странице прокрутки

@{Layout = null;} 
@model WebRole1.Models.RightsModel 

@{ 
ViewBag.Title = "AddRights"; 
} 

    <html style="background-color:#FFFFFF"> 
<head> 
<meta charset="utf-8" /> 
<title>@ViewBag.Title - My ASP.NET MVC Application</title> 
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
<meta name="viewport" content="width=device-width" /> 
@Styles.Render("~/Content/Site1.css") 


<script> 
    function myfunc() { 

     document.getElementById('mydiv2').style.display = "block"; 
    } 
    function hideview() { 

     document.getElementById('mydiv2').style.display = "none"; 
    } 
    function checkview(myID) { 
     if (myID.checked == true) { 
      view.checked = true; 
     } 

    } 
    function checkAll(myID) { 
     if (myID.checked == true) { 
      var list = document.getElementsByClassName('checkbox'); 
      for (i = 0; i < list.length; i++) { 
       list[i].checked = true; 
       //document.getElementsByClassName('CheckBoxFor')[i].checked = true; 
      } 
     } else { 
      var list = document.getElementsByClassName('checkbox'); 
      for (i = 0; i < list.length; i++) { 
       list[i].checked = true; 
      } 
     } 
    } 

</script>

<header> 

    <div class="title"> 
     <p class="site-title">@Html.ActionLink("Microsoft Rights Management", "Index", "Home")</p> 
    </div> 
</header> 


<div style="width:100%;padding-left:3em"> 


    <h2 class="main-content" style="color:#757580"> 
     Assign rights to the User 
    </h2> 
</div> 
<div style="background-color:#ffffff;float:left;padding-left:2em;" class="ui-tabs-nav"> 

    @using (Html.BeginForm("SaveTemplate","Temp")) 
    { 

     @Html.ValidationSummary(true) 
     <br /> 
<fieldset style="font-size:16.7px;font-weight:600;color:#757580"> 
    <legend>TemplateModel</legend> 
    <div> 
     @Html.RadioButtonFor(model => model.isCustom, "1", new {onclick="hideview()", style = "width:10px;display:initial" }) 
     VIEWER 
    </div> 
    <br /> 
    <div class="editor-field"> 
     @Html.RadioButtonFor(model => model.isCustom, "2", new {onclick="hideview()", style = "width:10px;display:initial" }) 
     REVIEWER 
    </div> 
    <br /> 
    <div class="editor-field"> 
     @Html.RadioButtonFor(model => model.isCustom, "3", new { onclick = "hideview()", style = "width:10px;display:initial" }) 
     COAUTHOR 
    </div> 
    <br /> 
    <div class="editor-field"> 
     @Html.RadioButtonFor(model => model.isCustom, "4", new { id="view",onclick="hideview()",style = "width:10px;display:initial" }) 
     COOWNER 
    </div> 
    <br /> 
    <div class="editor-field"> 
     @Html.RadioButtonFor(model => model.isCustom, "0", new { onclick="myfunc();",style = "width:10px;display:initial" }) 
     CUSTOM 
    </div> 
    <br /> 
    <div id="mydiv2" style="font-size: 16.7px; font-weight: 600; color: #757580;display:none;"> 
     <h1 style= "font-size:16.7px;font-weight:600;color:#757580"> 
      Custom Rights 

     </h1> 
     <br /> 
     @*@Html.CheckBoxFor(modelItem => modelItem.viewer,new { @onclick = "checkview();" })*@ 
     <input data-val="true" data-val-required="The viewer field is required." id="view" name="view" value="true" type="checkbox" class="checkbox" > View Content 

     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.save, new { @onclick = "checkview(this);" ,@class="checkbox"}) Save File 
     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.edit, new { @onclick = "checkview(this);",@class="checkbox" }) Edit Content 
     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.copy, new { @onclick = "checkview(this);", @class = "checkbox" }) Copy and Extract Content 
     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.viewAssigned, new { @onclick = "checkview(this);", @class = "checkbox" }) View Assigned Rights 
     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.change, new { @onclick = "checkview(this);", @class = "checkbox" }) Change Rights 
     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.macros, new { @onclick = "checkview(this);", @class = "checkbox" }) Allow Macros 
     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.export, new { @onclick = "checkview(this);",@class="checkbox" }) Export Content(SaveAs) 
     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.print, new { @onclick = "checkview(this);" ,@class="checkbox"}) Print 
     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.forward, new { @onclick = "checkview(this);",@class="checkbox" }) Foward 
     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.reply, new { @onclick = "checkview(this);", @class = "checkbox" }) Reply 
     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.replyall, new { @onclick = "checkview(this);", @class = "checkbox" }) Reply All 
     <br /> 
     <br /> 
     @Html.CheckBoxFor(modelItem => modelItem.fullcontrol, new { @onclick = "checkAll(this);"}) Full Control 

    </div> 

    <p> 
     <input type="submit" value="Save" /> 
    </p> 

</fieldset> 
    } 



</div>

Я пробовал такие вещи, как установка дна на 0px, но не работал. Вот изображение того, что происходит на свитке, я хочу, чтобы это синий ДИВ быть виден даже когда я прокручиваю

enter image description here

источник

2014-09-09 Kayani

, так что вы ожидаете, когда div переполняет или переполняет высоту страницы? –

@ EhsanSajjad Я добавил скриншот моей проблемы любезно ссылаюсь на редактирование – Kayani

только скриншот недостаточно, чтобы предоставить html и css или скрипку demo –

Вы ищете что-то вроде этого DEMO

HTML

<div class="wrapper"> 
<div style="height: 100%; width: 10%; background-color: #6495ED; float: left; word-wrap:break-word; overflow:auto;"> 
cdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcThis is a test for Div height upon page scroll 
</div> 
</div>

CSS

.wrapper{ 
height:300px; 
overflow:scroll; 
}

источник

2014-09-09 05:58:11 Zee

любезно посмотрел отредактированный вопрос, ваше решение didn помощь в моем случае – Kayani

Высота Div на странице прокрутки

ответ

Смежные вопросы