如何在不占用空间的情况下使用 CSS 包含隐藏的 DIV？

Posted 2023-05-09

【中文标题】如何在不占用空间的情况下使用 CSS 包含隐藏的 DIV？

【英文标题】：How can I include hidden DIVs using CSS without them take up space?

【发布时间】：2014-06-11 07:16:59

【问题描述】：

我有一个带有单个下拉列表的简单 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();

这是我对 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>

我不确定需要什么技巧才能让所有 div 在页面上占据相同的“不动产”，因为我一次只会显示其中一个。

【参考方案1】：

假设你使用jQuery，试试：

@
<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 规则之间的区别：

visibility:hidden

和

display:none

第一个只是隐藏元素，但保留占位符的大小与可见的大小相同。 第二个将其从大小和尺寸计算中删除。

【讨论】：

感谢 GRSEV，正是我想要的。有史以来最快的答案！ :-) 我会在几分钟后标记为答案。

【参考方案2】：

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