Question

我创建了一个完整的响应式CSS菜单，该菜单在较小的浏览器尺寸下变为下拉菜单。

在较小的屏幕尺寸下，下拉菜单的行为符合预期，但我想做的是强制下拉菜单元素占据窗口的整个高度和宽度，而无需更改页面的大小（我已经达到全宽，但未达到全高）。换句话说，我希望菜单占据窗口的整个高度，并位于除按钮之外的所有内容之上（以便可以再次将其折叠。

我已经尝试过更改一些属性，但是目前我不确定是否可以用这种方法。有人对如何执行此操作有想法吗？

JSFIDDLE HERE

CSS

public function barcodeDetail(Request $request)
    {
        $return_json = [];
        $receipt = trim($request->get('receipt'));
        $barcode = trim($request->get('barcode'));

        if (empty($receipt)) {

            $NewReceiving = NewReceiving::where('barcode', $request->get('barcode'))->get()->toArray();

            if (0 == sizeof($NewReceiving)) {
                $KTMasterReceipt = new KTMasterReceipt();
                $KTMasterReceipt->FK_CASHIER_CONTROL_ID = 1;
                $KTMasterReceipt->FK_TERMINAL_CONTROL_ID = 1;
                $KTMasterReceipt->save();
                $receipt = $KTMasterReceipt->id;
            }
            else{
                $receipt = $NewReceiving[0]['k_t_master_receipt_id'];
            }

        }

        $KTMasterReceipt = KTMasterReceipt::find($receipt)->KTMaster()->where('barcode', $request->get('barcode'))->get();

        if (0 == sizeof($KTMasterReceipt->toArray())) {
            $decode      = $this->decodeBarcode($barcode);

            $NewReceiving                         = new NewReceiving();
            $NewReceiving->K_T_MASTER_RECEIPT_ID    = $receipt;
            dd($receipt);
            $NewReceiving->LK_REVENUE_CODE_ID       = $receipt;
            $NewReceiving->ACCOUNT_NO               = $receipt;
            $NewReceiving->BILL_REFERENCE           = $receipt;
            $NewReceiving->BILL_AMOUNT              = $receipt;
            $NewReceiving->RECEIPT_NO               = $receipt;
            $NewReceiving->BILL_COUNT               = $receipt;
            $NewReceiving->TYPE                     = $receipt;
            $NewReceiving->save();
        }

        $return_json['receipt'] = $receipt;
        $return_json['KTMasterReceipt'] = KTMasterReceipt::where('id', $receipt)->get();
        $return_json['NewReceiving'] = NewReceiving::where('K_T_MASTER_RECEIPT_ID', $receipt)->get();
        $return_json['PaymentDetail'] = PaymentDetail::where('FK_KT_MASTER_RECEIPT_ID', $receipt)->get();

        return response()->json($return_json);
    }

HTML

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #f4f4f4;
}

a {
  color: #000;
}

/* pagenav */

.pagenav {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 3;
}

.pagenav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.pagenav li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.pagenav li a:hover,
.pagenav .nav-right-btn:hover {
  background-color: #f4f4f4;
}

/* nav-right */

.pagenav .nav-right {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* nav-right icon */

.pagenav .nav-right-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.pagenav .nav-right-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.pagenav .nav-right-icon .navicon:before,
.pagenav .nav-right-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.pagenav .nav-right-icon .navicon:before {
  top: 5px;
}

.pagenav .nav-right-icon .navicon:after {
  top: -5px;
}

/* nav-right btn */

.pagenav .nav-right-btn {
  display: none;
}

.pagenav .nav-right-btn:checked ~ .nav-right {
  max-height: 240px;
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon .navicon {
  background: transparent;
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon .navicon:before {
  transform: rotate(-45deg);
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon .navicon:after {
  transform: rotate(45deg);
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon:not(.steps) .navicon:before,
.pagenav .nav-right-btn:checked ~ .nav-right-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .pagenav li {
    float: left;
  }
  .pagenav li a {
    padding: 20px 30px;
  }
  .pagenav .nav-right {
    clear: none;
    float: right;
    max-height: none;
  }
  .pagenav .nav-right-icon {
    display: none;
  }
}

Answer 1

TL; DR -在单击时将菜单设置为height: calc(100vh - $nav-height)的动画。

我相信您要查找的是 vh和vw单位，视口宽度和视口高度。它们像百分比一样工作，但它们相对于视口而不是相对于父容器（如设置width: 100%）。因此，例如，width: 100vw表示视口宽度的100％，而不是其父容器的不是。

这些单元在所有当前浏览器中都具有很好的支持：https://caniuse.com/#feat=viewport-units

如果希望下拉元素也占据页面的整个高度，则可以使用Flexbox来实现。将列表元素包装在display: flex容器中，并使用justify-content和align-items属性（可能使用space-around属性），以便项目自动散布。这是有关Flexbox细节的出色指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

编辑：感谢Mark E提供了有用的小提琴。在此处包括使用display: flex属性的修改版本，以将元素分布在页面的整个高度上：https://jsfiddle.net/od5g8v4a/14/。它似乎没有破坏菜单的桌面版本。我添加了评论以显示已修改的内容。

请注意，从技术上讲，高度不应精确地设置为100vh的高度，而应设置为100vh - $navbar-height。您可能想使用use the calc()函数来实现此目的。

Answer 2

使用onclick JavaScript函数作为将窗口大小作为变量的按钮，该怎么办？然后，您可以使用if then语句来确定是否要使用Daniel H.的解决方案。像这样的东西-

<script>
    function getWindowSizeOnclick() {
        var h = window.innerHeight;
        if (h > [however high you need it to be]) {
          document.getElementByID("menuInQuestion").style.height = "100vh";
        }
     }
    function sizeOnWindowResize() {
          document.getElementByID("menuInQuestion").style.height = "original-size"
     }
</script>

将</body>结束标记之前的页面底部放在按钮的开始标记中onclick="getWindowSizeOnClick()"，然后将其放入开始正文标记onresize="sizeOnWindowResize()"

认为可以解决问题吗？

使下拉CSS菜单在媒体浏览器上达到全高

2 个答案: