【发布时间】：2020-08-11 14:52:02
【问题描述】：
所以我试图让我的内容区域可滚动，但这样做当然页面的背景颜色不会一直延伸。我已经尝试了几件事，但似乎无法让它一直延伸
所以结构就是这样 App.vue（路由器视图所在的地方）-> 管理作业视图（header 组件和作业组件所在的地方）-> 作业组件
这里有一点我的代码作为参考。我希望有人可以帮助我。我认为它没有扩展（来自工作组件的代码），因为其他组件/视图建立在工作之上，也定义了可能导致问题的 css（flex 等），但我不是 100% 确定
App.vue
<template>
<div class="h-screen flex">
<div class="flex flex-col flex-1">
<router-view></router-view>
</div>
</div>
管理工作视图
<template>
<div class="mx-aut h-full bg-mediumDarkGrey">
<DashboardHeaderAdminComponent></DashboardHeaderAdminComponent>
<!-- content area -->
<div class="container w-full mx-auto pt-20 h-screen">
<div class="w-full px-4 md:px-0 md:mt-40 mb-16 text-gray-800 leading-normal">
<!-- start actual content -->
<!-- page title -->
<div>
<h1 class="text-pumpkin uppercase text-2xl mb-6 w-full border-b-4 pb-6 border-pumpkin">Manage Jobs</h1>
</div>
<!-- sub nav -->
<div>
<ul class="flex">
<li class="mr-3 jobFreelancer" v-on:click="ToggleJobFreelancer = !ToggleJobFreelancer">
<a @click="ToggleJobInfluencer = !ToggleJobInfluencer" class="inline-block border border-pumpkin rounded py-1 px-3 bg-blue-500 text-pumpkin hover:text-white hover:border-white uppercase" href="#">Add job for Freelancer</a>
</li>
<li class="mr-3 jobInfluencer" v-on:click="ToggleJobInfluencer = !ToggleJobInfluencer">
<a @click="ToggleJobFreelancer = !ToggleJobFreelancer" class="inline-block border border-pumpkin rounded text-pumpkin hover:border-white hover:text-white py-1 px-3 uppercase" href="#">Add job for Influencer</a>
</li>
</ul>
</div>
<!-- content job freelancer -->
<div class="mt-12" :class=" ToggleJobFreelancer ? 'block' : 'hidden' ">
<JobFreelancer></JobFreelancer>
</div>
<!-- content job freelancer -->
<!-- if ToggleJobInfluencer is open then its visibile (default block) otherwise its hidden-->
<div class="mt-12" :class=" ToggleJobInfluencer ? 'block' : 'hidden' " >
<JobInfluencer ></JobInfluencer>
</div>
</div>
</div>
</div>
作业组件视图
<template>
<div class="h-screen">
<div class="pb-6">
<h1 class="text-white uppercase font-semibold">Post a freelancer job</h1>
</div>
<!-- Scroll wrapper -->
<div class="flex flex-1 ">
<!-- List jobs -->
<div class="bg-darkGrey pl-6 flex flex-1 overflow-y-hidden w-7/12">
<!-- Scrollable container -->
<div class="flex-1 flex-col flex overflow-y-hidden">
<div class="">
<table id="tblJobFreelancers" class="w-full flex flex-row flex-no-wrap sm:bg-white rounded-lg overflow-hidden sm:shadow-lg my-5">
<thead class="text-white uppercase">
<tr class="bg-pumpkin flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
<th class="p-3 text-left">Job</th>
<th class="p-3 text-left">Freelancer</th>
<th class="p-3 text-left">Deadline</th>
<th class="p-3 text-left">Completed</th>
<th class="p-3 text-left" width="110px">Manage</th>
</tr>
<tr class="bg-mellowLightBlue flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
<th class="p-3 text-left">Job</th>
<th class="p-3 text-left">Freelancer</th>
<th class="p-3 text-left">Deadline</th>
<th class="p-3 text-left">Completed</th>
<th class="p-3 text-left" width="110px">Manage</th>
</tr>
<tr class="bg-mellowLightBlue flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
<th class="p-3 text-left">Job</th>
<th class="p-3 text-left">Freelancer</th>
<th class="p-3 text-left">Deadline</th>
<th class="p-3 text-left">Completed</th>
<th class="p-3 text-left" width="110px">Manage</th>
</tr>
<tr class="bg-mellowLightBlue flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
<th class="p-3 text-left">Job</th>
<th class="p-3 text-left">Freelancer</th>
<th class="p-3 text-left">Deadline</th>
<th class="p-3 text-left">Completed</th>
<th class="p-3 text-left" width="110px">Manage</th>
</tr>
</thead>
<tbody class="flex-1 sm:flex-none">
<tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
<td class="border-grey-light border p-3">Wordpress website</td>
<td class="border-grey-light border p-3 truncate">John Doe</td>
<td class="border-grey-light border p-3 truncate">24/05/2020</td>
<td class="no border-grey-light border p-3 truncate">No</td>
<td class="border-grey-light border p-3 cursor-pointer">Edit - Delete</td>
</tr>
<tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
<td class="border-grey-light border p-3">Mobile app</td>
<td class="border-grey-light border p-3 truncate">Jane Doe</td>
<td class="border-grey-light border p-3 truncate">12/05/2020</td>
<td class="yes border-grey-light border p-3 truncate">Yes</td>
<td class="border-grey-light border p-3 cursor-pointer">Edit - Delete</td>
</tr>
<tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
<td class="border-grey-light border p-3">Flyer design </td>
<td class="border-grey-light border p-3 truncate">Jane Doe</td>
<td class="border-grey-light border p-3 truncate">1/05/2020</td>
<td class="yes border-grey-light border p-3 truncate">Yes</td>
<td class="border-grey-light border p-3 cursor-pointer">Edit - Delete</td>
</tr>
<tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
<td class="border-grey-light border p-3">Marketing campaign </td>
<td class="border-grey-light border p-3 truncate">John Doe</td>
<td class="border-grey-light border p-3 truncate">28/04/2020</td>
<td class="no border-grey-light border p-3 truncate">No</td>
<td class="border-grey-light border p-3 cursor-pointer">Edit - Delete</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Form -->
<div class="bg-darkGrey p-6 flex overflow-y-hidden w-5/12">
<!-- Scrollable container -->
<!-- Form -->
<div class="flex-1 flex-col flex overflow-y-hidden">
<form class="overflow-x-hidden" @submit.prevent="postNow" ref="jobFreelancerForm" method="post">
<div class="relative w-full">
<label for="email" class="uppercase text-pumpkin font-bold absolute pl-3 pt-2">Job Title</label>
<div>
<input id="title" type="text" class="pt-8 w-full rounded p-3 text-pumpkin" name="job.title" v-model="job.title" autocomplete="user.title" autofocus placeholder="job title">
</div>
</div>
<div class="relative w-full pt-6">
<label for="requirements" class="uppercase text-pumpkin font-bold absolute pl-3 pt-2 ">Job Requirements</label>
<textarea class="pt-12 w-full text-pumpkin rounded" rows="6" name="requirements">
Lorem Ipsum ...</textarea>
</div>
<div class="relative w-full pt-6">
<label for="description" class="uppercase text-pumpkin font-bold absolute pl-3 pt-2 ">Job Description</label>
<textarea class="pt-12 w-full text-pumpkin rounded" rows="6" name="description">
Lorem Ipsum ...</textarea>
</div>
<div class="flex justify-between pt-6">
<div class="relative w-full">
<label for="deadline" class="uppercase text-pumpkin font-bold absolute pl-3 pt-2">Deadline</label>
<div>
<input id="deadline" type="text" class="pt-8 w-full rounded p-3 text-pumpkin" name="job.deadline" v-model="job.deadline" autocomplete="user.deadline" autofocus placeholder="deadline">
</div>
</div>
<div class="m-2"></div>
<div class="relative w-full">
<label for="compensation" class="uppercase text-pumpkin font-bold absolute pl-3 pt-2">Compensation</label>
<div>
<input id="compensation" type="text" class="pt-8 w-full rounded p-3 text-pumpkin" name="job.compensation" v-model="job.compensation" autocomplete="user.compensation" autofocus placeholder="compensation">
</div>
</div>
</div>
<div class="pt-8">
<button type="submit" class="uppercase font-bold rounded w-full bg-white text-pumpkin py-2 px-3 text-2xl" >Post job</button>
</div>
</form>
</div>
</div>
</div>
</div>
【问题讨论】：
-
能提供demo吗？会更容易
-
@chojnicki 不，不幸的是我目前正在本地开发
-
我的意思是摆弄源代码（或只是部分代码有问题），而不是现场；）
-
“管理作业视图”第二行有一个类型：
mx-aut应该是mx-auto -
我会给带有
<div class="h-screen flex">的模板一个不同的背景颜色，然后仔细查看实际的 CSS。
标签： laravel vue.js tailwind-css