공간을 차지하지 않고 CSS를 사용하여 숨겨진 DIV를 포함하려면 어떻게해야합니까?

Question

단일 드롭 다운 목록이있는 간단한 MVC 5 페이지가 있습니다. 이 드롭 다운 목록에서 선택한 항목을 기반으로 페이지의 세 div 중 하나에 대한 표시 여부를 설정할 수 있습니다. 내가 겪고있는 문제는 각 div가 볼 수없는 경우에도 페이지에서 공간을 차지한다는 것입니다. 따라서 두 번째 div가 표시되도록 드롭 다운 목록에서 항목을 선택하면 해당 내용이 페이지에서 아래로 이동 한 것을 볼 수 있습니다.

다음은 컨트롤러에서 드롭 다운 목록의 데이터를 만드는 코드입니다. 여기

public ActionResult Index() 
{ 
    var searchBy = new List<SearchBy> 
    { 
    new SearchBy { Name = "Email Address", Value = "EmailAddress" }, 
    new SearchBy { Name = "Last name, First name", Value = "Name" }, 
    new SearchBy { Name = "Username", Value = "Username" } 
    }; 

    ViewBag.SearchByOptions = new SelectList(searchBy, "Value", "Name"); 

    return View(); 
} 

내가 같은 페이지에 같은 "부동산"을 취하도록 div의 모든 얻기 위해 필요한 것을 트릭 확실하지 오전 Index.cshtml

@{ 
<script type="text/javascript"> 
    $(document).ready(function() { 
     // Make all three <div>s hidden when the page loads... 
     document.getElementById("searchByEmail").style.visibility = "hidden"; 
     document.getElementById("searchByName").style.visibility = "hidden"; 
     document.getElementById("searchByUsername").style.visibility = "hidden"; 
    }); 

    function searchBy(selectedItem) { 
     if (selectedItem == "EmailAddress") { 
      // Make visible 
      document.getElementById("searchByEmail").style.visibility = "visible"; 
      // Make in-visible 
      document.getElementById("searchByName").style.visibility = "hidden"; 
      document.getElementById("searchByUsername").style.visibility = "hidden"; 
     }     

     if (selectedItem == "Name") { 
      // Make visible 
      document.getElementById("searchByName").style.visibility = "visible"; 
      // Make in-visible 
      document.getElementById("searchByEmail").style.visibility = "hidden"; 
      document.getElementById("searchByUsername").style.visibility = "hidden"; 
     } 

     if (selectedItem == "Username") { 
      // Make visible 
      document.getElementById("searchByUsername").style.visibility = "visible"; 
      // Make in-visible 
      document.getElementById("searchByEmail").style.visibility = "hidden"; 
      document.getElementById("searchByName").style.visibility = "hidden"; 
     } 
    }; 
</script> 
} 

<h2>Index</h2> 
<div>  
    Search for existing users by: @Html.DropDownList("SelectedItem", (SelectList)ViewBag.SearchByOptions, "-- Select One --", new { onchange = "searchBy($('#SelectedItem').val());" }) 
</div> 

<div id="searchByEmail"> 
    Emails... 
</div> 

<div id="searchByName"> 
    Names... 
</div> 

<div id="searchByUsername"> 
    Usernames... 
</div> 
} 

내 마크 업입니다 I 한 번에 하나씩 만 보여줄 것입니다. 또한,

@{ 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#searchByEmail").hide(); 
     $("#searchByName").hide(); 
     $("#searchByUsername").hide(); 
    }); 

    function searchBy(selectedItem) { 
     if (selectedItem == "EmailAddress") { 
      $("#searchByEmail").show(); 
      $("#searchByName").hide(); 
      $("#searchByUsername").hide(); 
     }     
     if (selectedItem == "Name") { 
      $("#searchByName").show(); 
      $("#searchByEmail").hide(); 
      $("#searchByUsername").hide(); 
     } 

     if (selectedItem == "Username") { 
      $("#searchByUsername").show(); 
      $("#searchByEmail").hide(); 
      $("#searchByName").hide(); 
     } 
    }; 
</script> 
} 

<h2>Index</h2> 
<div>  
    Search for existing users by: @Html.DropDownList("SelectedItem", (SelectList)ViewBag.SearchByOptions, "-- Select One --", new { onchange = "searchBy($('#SelectedItem').val());" }) 
</div> 

를 CSS 규칙의 차이점이 무엇인지 확인하십시오 :

Answer 1

당신이 jQuery를 사용한다고 가정하면, 시도

visibility:hidden 

가와

display:none 

처음은 요소를 숨기 만하지만 표시되는 것과 동일한 크기로 자리 표시자를 유지합니다. 두 번째는 크기 및 치수 계산에서 제거합니다.

Answer 2

.style.display = "block"; /* or none to hide it */